为什么添加正的viewbox min-x、min-y值会产生负的translate效果？

Question

我刚刚查看了这个代码片段，代码如下：

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

现在当我调整视口并将值更改为viewbox="100 100 225 225"时，它会产生类似于以下效果的结果：

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

我认为当我将min-x、min-y指定为100时，viewbox的值应该产生以下效果：

transform:translate(100px, 100px);

但实际上效果类似于：

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

为什么呢？有人能解释一下吗？

- Alexander Solonik

Answer 1

通过将minX和minY设置为100，您告诉SVG渲染器，您的SVG左上角从（100,100）开始。该点应位于SVG视口的左上角。

这与您决定标尺从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设置为奶油色区域，并相应地设置视口（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的小红圆圈现在在视口的左上角。

希望这能让你更清楚。

- Paul LeBeau

---

谢谢你的回答，那么你的意思是100,100分别指向0,0的左侧和顶部吗？我有点困惑，难道100,100不应该从0开始算100个单位吗？ - Alexander Solonik

不，(100,100) 在 (0,0) 的右下方。因此，如果您将 viewBox 的 minX/minY 设置为该值，您基本上是告诉渲染器将该点视为图片的左上角。因此，图片中位于 (100,100) 点的任何内容都会被绘制在左上角。这使得整个图片看起来好像已经向上和向左移动了。 - Paul LeBeau

我不确定我是在接近答案还是让自己更加困惑哈哈，感谢你尝试向我解释这个概念...你说了以下的陈述：“通过将minX和minY设置为100，你所做的是告诉SVG渲染器，你的SVG的左上角从(100,100)开始。”...当你说从(100,100)开始时，是指视口的(100,100)还是SVG本身的(100,100)？ - Alexander Solonik

它在文档坐标系中是(100,100)。因此，如果您有一个圆形如<circle cx="100" cy="100" r="10"/>，它将位于视口的左上角。 - Paul LeBeau

我已经添加了一些例子，希望能让事情更清楚。 - Paul LeBeau

Answer 2

1. 想象一下，你有一张画纸上面画了一幅图，然后在上面覆盖一张透明的薄膜（或者其他透明材料）。

2. 在薄膜上画一个方框并填充方框外的区域。

3. 将薄膜向右移动。

4. 你的图画（在薄膜内仍然可见的部分）似乎向左移动了。

在这个例子中，viewBox 就是薄膜。

- Robert Longson