SVG 的 matrix() 变换是实现精确、复合图形变形的核心工具，通过六个参数 a、b、c、d、e、f 构成仿射变换矩阵，支持缩放、旋转、倾斜、平移及组合变换，性能优于链式 transform 属性，且适用于坐标映射、局部隔离、逆变换还原与动画插值等场景。

SVG 的 matrix() 变换是实现精确、复合图形变形的核心工具，尤其在动画、交互式图表、地图缩放和平面几何运算中，比简单 rotate/scale/translate 更灵活可控。

Matrix 基础：六个参数的几何意义

SVG 中的 matrix(a, b, c, d, e, f) 对应仿射变换矩阵：

[ a  c  e ]
[ b  d  f ]
[ 0  0  1 ]

它作用于点 (x, y) 的方式是：
x' = a·x + c·y + e
y' = b·x + d·y + f

• a 和 d 主导 x/y 方向缩放与水平/垂直翻转
• b 和 c 控制倾斜（shear）和旋转分量
• e 和 f 是平移量（等效于 translate(e,f)）

组合变换：避免嵌套，用矩阵乘法合并

多个连续变换（如先缩放再旋转再平移）若用 SVG 属性链式书写（transform="scale(2) rotate(30) translate(10,5)"），浏览器需逐层解析；而预先计算为单个 matrix，性能更高、逻辑更清晰。

• 顺序关键：矩阵乘法不可交换。A·B ≠ B·A，变换顺序从右到左（即最后写的变换最先应用）
• 可用 JavaScript 手动相乘，或借助 DOMMatrix（现代浏览器支持）：
  new DOMMatrix().scale(2).rotate(30).translate(10,5) → 自动返回归一化 matrix 值
• 例如：绕某点 (cx,cy) 旋转 θ，等价于 translate(cx,cy) · rotate(θ) · translate(-cx,-cy)，最终可合成为单 matrix

在复杂图形中的典型场景

面对路径（）、多边形组（）或动态生成的矢量图形，matrix 提供统一、可编程的控制入口：

• 坐标系对齐：将自定义数据坐标（如经纬度、传感器值）映射到 SVG 像素空间，只需构造一个 scale+translate 矩阵，批量应用于所有元素
• 局部变换隔离：对 应用 matrix，其内部所有子元素（含嵌套 、）自动继承，无需逐个设置
• 逆变换还原：通过 DOMMatrix.inverse() 快速获取反向矩阵，用于鼠标坐标拾取——把屏幕点击位置反算回原始数据坐标
• 动画插值：对两个 matrix 的 a/b/c/d/e/f 分别做线性插值（而非对 rotate/scale 分别插值），能避免万向节死锁、保持形变连续性，适合机械臂、骨骼动画等

调试与注意事项

matrix 数值抽象，易出错。实际开发中建议：

• 用 getCTM() 或 getScreenCTM() 获取当前变换矩阵，配合 console.log 查看实时值
• 注意 viewBox 和 preserveAspectRatio 会影响最终渲染，matrix 作用于元素自身坐标系，不直接干预 viewBox 缩放逻辑
• IE 不支持 DOMMatrix，需降级使用 polyfill 或手动实现 3×3 矩阵乘法函数
• 过度嵌套 matrix（如每帧重设）可能触发重排，高频动画建议结合 requestAnimationFrame 和 CSS transform（对 外容器）协同优化

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！