为什么要倾斜设置了Y的元素,也要使其在X上移动?

时间:2018-06-21 10:08:59

标签: svg skew

这里的example的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>

这是正确的。

为什么我向偏斜元素set添加一个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。

1 个答案:

答案 0 :(得分:0)

转换skewX(angle)的计算如下:

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

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

换句话说,变换的中心始终在坐标(0, 0)上。