在preserveAspectRatio =“none”中保留SVG元素的比例

Question

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

但是我想在它里面有一个固定大小和完美的圆圈。似乎最外面的<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>

Answer 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尺寸，以便图形不会溢出框。