坐标变换

介绍SVG坐标变换的基础概念，包括平移、旋转、缩放等变换操作。理解坐标变换对绑制复杂图形非常重要。 SVG 的坐标变换可以改变图形的位置、大小和角度。和 CSS transform 类似，但有一些细节不同。

transform 属性

SVG 元素通过 transform 属性应用变换：

<rect transform="translate(50, 50)" .../>

平移 translate

将元素移动到新位置。

<rect x="0" y="0" width="40" height="40" fill="#3498db"/>
<rect x="0" y="0" width="40" height="40" fill="#3498db" transform="translate(80, 30)"/>

注意：平移的是坐标系统，不是图形本身。所以 x、y 还是写 0。

旋转 rotate

绕原点旋转指定角度。

<rect x="20" y="30" width="60" height="30" fill="#3498db" transform="rotate(15)"/>

指定旋转中心

rotate(angle, cx, cy) 可以指定旋转中心点。

<rect x="30" y="30" width="60" height="30" fill="#3498db" transform="rotate(20, 60, 45)"/>

缩放 scale

放大或缩小元素。

<rect x="20" y="30" width="40" height="40" fill="#3498db" transform="scale(0.5)"/>
<rect x="100" y="20" width="40" height="40" fill="#e74c3c" transform="scale(1.5)"/>

分别设置 x 和 y 缩放

<circle cx="50" cy="50" r="30" fill="#3498db" transform="scale(1.5, 0.5)"/>

倾斜 skew

沿 x 或 y 轴倾斜。

<rect x="20" y="25" width="50" height="50" fill="#3498db" transform="skewX(20)"/>
<rect x="120" y="25" width="50" height="50" fill="#e74c3c" transform="skewY(15)"/>

组合变换

多个变换可以组合使用，用空格分隔。

<rect x="80" y="40" width="40" height="40" fill="#e74c3c" 
      transform="translate(30, 10) rotate(15) scale(1.2)"/>

重要：变换是从右到左执行的。上面的例子实际执行顺序是：

1. scale(1.2) - 先放大
2. rotate(15) - 再旋转
3. translate(30, 10) - 最后平移

变换原点

SVG 变换的原点默认是 (0, 0)，即左上角。这和 CSS 不同（CSS 默认是元素中心）。

用 CSS 控制变换

SVG 元素也支持 CSS transform：

rect {
  transform: rotate(45deg);
  transform-origin: center center;
}

小结