javascript - 如何使 SVG View 框与其容器一样宽？

Question

我正在尝试解决这个问题，但遇到了很多麻烦:

    <div class="wrapper">
      <svg width="100%" height="100%" viewbox="0 0 100 100">
       <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
      </svg>
    </div>

我怎样才能使视框坐标按照 svg 元素的视口(viewport)坐标在高度和宽度上拉伸(stretch) 100%？

附言 wrapper 为 100% 宽并具有设定高度。

Answer 1

只需从您的 SVG 元素中删除“高度”和“宽度”属性。

 <div class="wrapper">
    <svg viewbox="0 0 100 100">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>
 </div>

https://jsfiddle.net/mhcp4qpy/

SVG 有点奇怪，因为它们的缩放比例与大多数 img 元素不同。大多数人都“过度思考”了它。

如果您希望 高度 也 100% 填充容器并且永不溢出，您可以更改 SVG 上的“preserveAspectRatio”属性，使其变形超出其原始值纵横比。

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio