← 返回 SVG 模块

SVG 变换操作

使用 transform 属性对 SVG 元素进行平移、旋转、缩放和倾斜等变换。

平移 (translate)

0
0
transform="translate(0, 0)"

旋转 (rotate)

0°
transform="rotate(0 150 125)"

缩放 (scale)

1.0
1.0
transform="scale(1, 1)"

倾斜 (skew)

0°
0°
transform="skewX(0) skewY(0)"

🎮 组合变换

多个变换可以组合使用，变换顺序会影响最终结果

0
0
0°
1.0
transform="translate(0, 0) rotate(0 250 150) scale(1)"

💡 关键知识点

  • translate(x, y): 平移元素，x 和 y 为偏移量
  • rotate(angle cx cy): 旋转元素，angle 为角度，cx/cy 为旋转中心（可选）
  • scale(x, y): 缩放元素，x 和 y 为缩放比例（y 可选，默认等于 x）
  • skewX(angle) / skewY(angle): 倾斜元素
  • matrix(a b c d e f): 使用矩阵进行复杂变换
  • 多个变换可以组合使用，从左到右依次应用
  • 变换顺序很重要：translate rotate 和 rotate translate 结果不同