为什么SVG preserveAspectRatio属性工作奇怪？

Question

我创建了一个简单的示例https://jsfiddle.net/7mupweLe/

xMidYMid

为什么黑色矩形在这种情况下向右偏移。据我了解，它必须完全在中间，因为我有HTTP/2。

Answer 1

我们想要显示100 x 200（viewBox）<svg>元素的宽度和高度） >

preserveAspectRatio的会面说明确保我们展示所有东西并在侧面或顶部（在这种情况下是侧面）上留出空间。 xMidYMid意味着使空间均匀。

因此，在viewBox的左侧和右侧，除了SVG包含一个形状之外，我们还会看到背景 - 一个比viewBox 200 x 200更大的rect对着viewBox的100 x 200所以它将viewBox溢出到右侧。

如果我们使rect与viewBox的大小相同，那么一切都是对称的。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;