为什么具有不同尺寸比例的视图框的 svg 会在中心呈现元素？

Question

我试图理解为什么在下面的 svg 中元素出现在中心

<svg xmlns="http://www.w3.org/2000/svg"
     width="400" height="100"
     viewBox="0 0 100 100"
     style="outline: 1px solid green"
>
    <rect x="0" y="0" width="75" height="100" fill="#2222FF"  stroke="green"/>
</svg>

我的理解是 viewBox 会将 svg 上由坐标 0,0 - 100,100 定义的框映射到 400x100 图像。所以应该给我一个从上到下的矩形，它达到 3/4 的距离。至少我希望矩形一直在左边。

我这辈子都搞不懂为什么这里的矩形会出现在中间。怎么回事？

Answer 1

因为默认的preserveAspectRatio是xMidYMid。

为什么具有不同尺寸比例的视图框的 svg 会在中心呈现元素？

Why does an svg with viewbox of different ratio to dimensions renders element in center?

svg

viewbox