如何使SVG viewbox像其容器一樣寬？

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元素的視口坐標沿高度和寬度拉伸100％？

PS包裝紙的寬度為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/zh-CN/docs/Web/SVG/Attribute/preserveAspectRatio