在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>

- ahmet alp balkan

---

preserveAspectRatio=none - Erik Dahlström

请查看我在这个问题中的回答：http://stackoverflow.com/questions/16891277/programmatically-centering-svg-path/16921836#16921836 - Paul LeBeau

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 大小，以避免图形溢出盒子。

- DiggityDug