在 preserveAspectRatio="none" 中保留 SVG 元素的比率答案

【问题标题】：Preserving ratio of a SVG element inside preserveAspectRatio="none"在 preserveAspectRatio="none" 中保留 SVG 元素的比率
【发布时间】：2013-07-09 03:25:54
【问题描述】：

我有一个带有 viewBox="0 0 100 100" 和 preserveAspectRatio="none" 的 SVG 元素会根据窗口大小自动调整大小。

但是我试图在里面有一个固定大小的完美圆圈。似乎最外面的 <svg> 元素不允许这样做。有什么想法吗？

(jsFiddle here)

<svg width="100%" height="50%" viewBox="0 0 100 100"
     preserveAspectRatio="none">

    <!-- ... OTHER SVG ELEMENTS I HAVE -->
    <circle cx="50" cy="50" r="10px" fill="red"></circle>
</svg>

【问题讨论】：

preserveAspectRatio=none 告诉浏览器不要保留纵横比，那么，您是否尝试将其设置为其他值？参考w3.org/TR/SVG11/coords.html#PreserveAspectRatioAttribute。
在这里查看我对这个问题的回答：stackoverflow.com/questions/16891277/…

标签： svg

【解决方案1】：

如果你想要一个完美大小的圆圈，那么试试这样的……

<svg width="100%" height="50%" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"   style="border: 1px solid #000">
    <!-- ... OTHER SVG ELEMENTS I HAVE -->
    <circle cx="50" cy="50" r="40px" fill="red"></circle>
</svg>

preserveAspectRatio="xMidYMid meet" 属性意味着圆将扩展到最大 x 和 y 大小，这样图形就不会溢出框。

【讨论】：