为什么倾斜具有 Y 集的元素也会将其移动到 X 上?

Question

下面是 X/Y 设置为 0 的示例：

<svg>
<rect x="0" y="0" width="100" height="100"
style="stroke: #3333cc; fill:none;" />
<rect x="0" y="0" width="100" height="100"
style="stroke: #000000; fill:none;"
transform="skewX(50)" />
</svg>

这是正确的。

为什么如果我为倾斜元素设置 Y 值，它也会在 X 轴上移动？

<svg>
<rect x="0" y="0" width="100" height="100"
style="stroke: #3333cc; fill:none;" />
<rect x="0" y="10" width="100" height="100"
style="stroke: #000000; fill:none;"
transform="skewX(50)" />
</svg>

我希望仅在 Y 轴上偏移，而不是在 X 轴上偏移。事实上，如果我只应用于 X，它只是在 X 轴上偏移，而不是 Y。

Answer 1

转换skewX(angle)的计算方法如下：

x' = x + y * tan(angle)
y' = y

因此，如果矩形的左上角位于(0, 10)，skewX(50)它将被映射到(11.92, 10).

换句话说，变换的中心始终位于坐标(0, 0)。