为什么添加正视图框min-x，min-y值会产生负转换效果？

Question

我刚刚通过 THIS 小提琴，代码如下所示：

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

我相信，当我指定100作为min-x, min-y viewbox的值时，效果应该类似于

transform:translate(100px, 100px);

但效果类似于：

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

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

Answer 1

1. 想象一下，你的纸上有一张纸，上面覆盖着一块橘皮组织（或透明的东西）。

2. 在盒子外面的所有东西上画一个橘红色的盒子和颜色。

3. 将橘皮组织向右移动。

4. 您的绘图（仍然可以在橘皮组合框中看到的部分）似乎已向左移动。

viewBox是此示例中的橘皮盒。