skewX skewY
将多边形水平倾斜 45 度:
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 30,30 0,30" transform="skewX(45)" />
</svg>
结果相当于
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 60,30 30,30" />
</svg>
x 值计算为 x + y * tan(angle)
,y 值保持不变
将多边形垂直倾斜 30 度:
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 30,30 0,30" transform="skewY(30)" />
</svg>
结果相当于(允许舍入)
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,17.32 30,47.32 0,30" />
</svg>
x 值保持不变,y 值计算为 y + x * tan(angle)