这里的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。
答案 0 :(得分:0)
转换skewX(angle)
的计算如下:
x' = x + y * tan(angle)
y' = y
因此,如果矩形的左上角位于(0, 10)
,则skewX(50)
将会映射到(11.92, 10)
。
换句话说,变换的中心始终在坐标(0, 0)
上。