转型

可以通过添加 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 度。