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

Question

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

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

为什么黑色矩形向右偏移了这种情况。据我了解，它必须正好在中间，因为我有 xMidYMid.

Answer 1

我们有一个 200 x 200 像素的区域（<svg> 元素的宽度和高度），我们想在其中显示 100 x 200 的内容（viewBox）

preserveAspectRatio 的会议说确保我们显示所有内容并在侧面或顶部（在本例中为侧面）显示 space。 xMidYMid 表示使 space 均匀。

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

如果我们让 rect 和 viewBox 一样大，那么一切都是对称的。

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

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

Why does the SVG preserveAspectRatio attribute work strangely?

svg

viewport

viewbox