svg - 在 preserveAspectRatio="none" 中保留 SVG 元素的比率

Question

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

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

（这里是jsFiddle）

<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 大小，以便图形不会溢出框。