SVG中matrix变换本质是用6参数仿射矩阵统一计算各点新坐标，涵盖平移、旋转、缩放、倾斜，顺序严格、可累积、精度高；参数a~f对应⎡a c e⎤⎣b d f⎦⎣0 0 1⎦，其中e/f为平移量，a/d主控缩放，b/c主控倾斜。
SVG中用矩阵实现坐标系变换，本质是把图形的每个点按线性代数规则重新计算位置。它不是“叠加多个transform属性”，而是用一个6参数矩阵统一描述平移、旋转、缩放、倾斜等所有2D变换，且顺序严格、可累积、精度高。
matrix(a,b,c,d,e,f)六个参数的实际含义
SVG的matrix(a,b,c,d,e,f)对应标准二维仿射变换矩阵：
⎡a c e⎤
⎣b d f⎦
⎣0 0 1⎦
其中：
- a 和 d 控制x、y方向的缩放（也影响旋转和倾斜）
- b 和 c 主要负责倾斜（skew）：b = tan(倾斜角_y)，c = tan(倾斜角_x)
- e 和 f 是平移量（单位：用户坐标系像素），即新坐标系原点在旧坐标系中的位置
如何手算一个常见变换的矩阵
比如：把一个图形绕点(50,30)顺时针旋转30°，再整体向右平移10px、向下平移20px。
步骤是“先平移原点到旋转中心 → 旋转 → 平移回原点 → 最后加全局位移”：
- 平移(-50,-30)：matrix(1,0,0,1,-50,-30)
- 顺时针旋转30°（即-30°）：cos(-30°)≈0.866，sin(-30°)=-0.5 → matrix(0.866,0.5,-0.5,0.866,0,0)
- 平移(50,30)：matrix(1,0,0,1,50,30)
- 再加全局位移(10,20)：matrix(1,0,0,1,10,20)
把这四个矩阵按顺序左乘（SVG中变换从左到右应用，矩阵乘法顺序为 M₄ × M₃ × M₂ × M₁），结果就是最终的单个matrix值。
用SVG.js或原生SVG应用矩阵
两种常用方式，效果一致，但封装程度不同：
-
原生SVG写法：
<rect x="0" y="0" width="100" height="50" transform="matrix(0.866 -0.5 0.5 0.866 60 40)" /> -
SVG.js写法：
rect.matrix(new SVG.Matrix(0.866, -0.5, 0.5, 0.866, 60, 40))或rect.transform({ matrix: [0.866, -0.5, 0.5, 0.866, 60, 40] })
注意：SVG.js的Matrix构造函数参数顺序与原生matrix()一致，都是 a,b,c,d,e,f。
为什么优先用矩阵而不是多个transform函数？
关键在于“顺序不可控”和“累积误差”：
- 多个
transform="rotate() scale() translate()"会按字符串顺序逐个执行，容易因理解偏差导致结果错乱 - 每次调用
transform()方法（如反复rotate）若未设相对模式（第二个参数true），会覆盖而非叠加 - 矩阵天然支持合并：两个变换矩阵相乘，结果仍是合法矩阵，一次应用即可，无中间坐标系干扰
- 动画、响应式重绘、坐标反查（如点击定位）时，矩阵形式更易提取和复用
