为什么SVG PreserveSpectRatio属性工作异常？_Svg_Viewport_Viewbox

为什么SVG PreserveSpectRatio属性工作异常？

svg

为什么SVG PreserveSpectRatio属性工作异常？,svg,viewport,viewbox,Svg,Viewport,Viewbox,我创建了一个简单的示例在这种情况下，为什么黑色矩形向右偏移。正如我所理解的，它必须在中间，因为我有 XMIDYMID .< /P> < P>我们有一个200×200 px的区域（ >代码>元素的宽度和高度），在其中我们想要显示100×200（视图框）的东西。 PreserveSpectratio的会议说，确保我们显示所有内容，并在侧面或顶部（在本例中为侧面）留有空间。xMidYMid意味着使空间均匀因此，在viewBox的左侧和右侧，我们将看到背景，除了SVG包含一个形状-一个比view

我创建了一个简单的示例

在这种情况下，为什么黑色矩形向右偏移。正如我所理解的，它必须在中间，因为我有<代码> XMIDYMID .< /P> < P>我们有一个200×200 px的区域（<代码> >代码>元素的宽度和高度），在其中我们想要显示100×200（视图框）

的东西。 PreserveSpectratio的会议说，确保我们显示所有内容，并在侧面或顶部（在本例中为侧面）留有空间。xMidYMid意味着使空间均匀

因此，在viewBox的左侧和右侧，我们将看到背景，除了SVG包含一个形状-一个比viewBox 200 x 200大的矩形，与viewBox的100 x 200相对，因此它会溢出viewBox到右侧

如果我们使矩形与viewBox的大小相同，则一切都是对称的

<svg style="background:yellow" 
  height="200" width="200" viewBox="0 0 100 200" 
  preserveAspectRatio="xMidYMid meet">
    <rect class="rect" x="0" y="0" width="200" height="200" />
</svg>