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