如何使SVG viewbox像其容器一样宽？

Question

I'm trying to figure out this, but having a lot of trouble: 我试图弄清楚这一点，但是有很多麻烦：

    <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>

How can I make it so that the viewbox coordinates stretch 100% in height & width, following the viewport coordinates of the svg element? 我该如何做才能使视框坐标沿svg元素的视口坐标沿高度和宽度拉伸100％？

PS The wrapper is 100% wide and has a set height. PS包装纸的宽度为100％，并具有设定的高度。

Answer 1

Just remove the 'height' and 'width' attributes from your SVG element. 只需从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/ https://jsfiddle.net/mhcp4qpy/

SVGs are a bit odd because they scale differently than most img elements. SVG有点奇怪，因为它们的缩放比例与大多数img元素不同。 Most ppl 'overthink' it. 大多数人都“想得太多”。

If you'd like the height to also fill the container 100% and never overflow, you can change the 'preserveAspectRatio' attribute on the SVG to make it so that it will distort beyond its original aspect ratio. 如果您希望高度也能填充容器100％且永不溢出，则可以更改SVG上的'preserveAspectRatio'属性以使其高度变形，以使其超出原始宽高比。

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

如何使SVG viewbox像其容器一样宽？

问题描述

1 个解决方案

解决方案1
2 2018-05-01 17:57:06

如何使SVG viewbox像其容器一样宽？

问题描述

1 个解决方案

解决方案1 2 2018-05-01 17:57:06

解决方案1
2 2018-05-01 17:57:06