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

问题描述

我试图理解为什么在下面的 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。至少我希望矩形一直在左边。

我一生都无法理解为什么这里的矩形出现在中心。这是怎么回事？

解决方法

因为默认的 preserveAspectRatio 是 xMidYMid。