svg - 为什么添加正 View 框 min-x, min-y 值会产生负平移效果？

Question

我刚刚经历了 THIS fiddle 和代码如下所示:

<svg width=200 height=200 viewbox="0 0 225 225" >
    <path d="M220, 220
            A200, 200, 0, 0, 0, 20, 20
            L 20, 220
            Z"
    fill = "lightskyblue">
    </path>
</svg>

现在，当我使用 View 框并将值更改为 viewbox="100 100 225 225" 时它具有执行以下操作的效果:

transform:translate(-100px, -100px);

好吧，我相信当我指定 100作为 min-x, min-y viewbox 的值效果应该是这样的
transform:translate(100px, 100px);
但相反，效果类似于:

transform:translate(-100px, -100px);

为什么这样 ？有人可以解释一下吗？

Answer 1

通过将 minX 和 minY 设置为 100，您所做的是告诉 SVG 渲染器您的 SVG 的左上角从 (100,100) 开始。该点应该在 SVG 视口(viewport)的左上角。

这就像你决定你的尺子从 10 厘米开始。 12 厘米标记似乎是 2 厘米而不是 12 厘米。换句话说，再左(下)10 厘米。

查看以下示例 SVG。我已经标记了一个区域，我们将在后面的示例中设置视口(viewport)和 viewBox。

<svg width="600" height="600">

  <!-- mark the area that will become the viewport -->
  <rect x="100" y="100" width="300" height="200" fill="linen"/>

  <!-- add some other content -->
  <circle cx="120" cy="120" r="20" fill="red"/>
  <circle cx="200" cy="200" r="50" fill="red"/>
  <circle cx="380" cy="270" r="50" fill="red" fill-opacity="0.3"/>

</svg>

如果我们现在设置 viewBox到奶油色区域并相应地设置视口(viewport)(SVG width 和 height )，您将看到会发生什么。

<svg width="300" height="200" viewBox="100 100 300 200">

  <!-- mark the area that will become the viewport -->
  <rect x="100" y="100" width="300" height="200" fill="linen"/>

  <!-- add some other content -->
  <circle cx="120" cy="120" r="20" fill="red"/>
  <circle cx="200" cy="200" r="50" fill="red"/>
  <circle cx="380" cy="270" r="50" fill="red" fill-opacity="0.3"/>

</svg>

您可以看到大约 100,100 的红色小圆圈现在位于视口(viewport)的左上方。

希望这能让你更清楚。