转型

可以通过添加 transform 属性来更改图形元素。

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="30" height="30" transform="translate(10, 10)" />
</svg>

而不是在坐标(0,0)处渲染左上角原点,而是从点(10,10)向下和向右显示。

整组元素可以一起转换,转换可以相互添加。

<svg xmlns="http://www.w3.org/2000/svg">
    <g transform="rotate(45)">
        <rect x="0" y="0" width="30" height="30" />
        <circle cx="5" cy="5" r="5" transform="scale(3)" />
    </g>
</svg>

首先,圆的每个点将使用因子 3 相对于原点进行缩放,使圆的中心位于(15,15)矩形的中间,半径为 15.然后,矩形和圆圈将围绕原点顺时针旋转 45 度。