SVG 偏斜,偏斜


本文向大家介绍SVG 偏斜,偏斜,包括了SVG 偏斜,偏斜的使用技巧和注意事项,需要的朋友参考一下

示例

将多边形水平倾斜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值计算为,y值保持不变x + y * tan(angle)

将多边形垂直倾斜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)