Javascript 如何在没有viewbox属性的情况下进行SVG缩放？

我正在尝试缩放ReactJS组件，使其能够扩展以适合其父div容器。该组件返回一个

<svg/>

有几个孩子的元素。react组件的API只允许我设置svg元素的CSS样式。我没有办法给svg元素一个viewbox属性

有没有一种方法可以让SVG仅通过CSS进行缩放以填充其父容器

---

供参考的反应组分：

嗯，非常简单。你所需要做的就是合并和合并。此解决方案用于将svg世界地图扩展到我所在公司的应用程序prod build上的dashboard小部件区域

有一个发布了JSFIDLE演示的链接

(function() {

  const parent = document.querySelector('.parent');
  const item = document.querySelector('.item');
  let scaleAdjust = 1.0;
    
  const process = (container, ref) => {
    const {
      height: originHeight,
      width: originWidth
     } = ref.getBoundingClientRect();
    const {
      height: containerHeight,
      width: containerWidth,
    } = container.getBoundingClientRect();
    const [height, width] = [originHeight * scaleAdjust, originWidth * scaleAdjust];
    const [from, to] = height > width ? [width, containerWidth] : [height, containerHeight];
    const scale = to / from;
    ref.style.transform = `scale(${scale})`;
    scaleAdjust = 1 / scale;
  };

  new ResizeObserver(() => process(parent, item)).observe(document.body);
    
})();

---

不容易，这就是viewBox属性存在的原因。

someSelector svg{display:block；width:100%}

不起作用吗？不，它会扩展svg以填充整个区域，但不会缩放svg的子级。也就是说，绘制的项目保持原样，不会缩放如果SVG设置了宽度和高度属性，那么据我所知，您运气不好，在SVG挂载后，您可以通过遍历DOM绕过它，并通过vanilla JavaScript设置

viewBox

属性，但从长远来看，这可能不是一个很好的解决方案。