首页 文章

如何将SVG视图框作为其容器？

提问于
浏览 次
0

我想弄清楚这一点，但遇到了很多麻烦：

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

附：包装纸100％宽，并具有设定高度 .

javascript css css3 svg viewbox

1 回答

  • 1

    只需从SVG元素中删除“height”和“width”属性即可 .

    <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

    回复于

相关问题