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
在复杂图形中的典型场景
面对路径（<path></path>）、多边形组（<g></g>）或动态生成的矢量图形，matrix 提供统一、可编程的控制入口：
立即学习“前端免费学习笔记（深入）”；
- 坐标系对齐：将自定义数据坐标（如经纬度、传感器值）映射到 SVG 像素空间，只需构造一个 scale+translate 矩阵，批量应用于所有元素
-
局部变换隔离：对
<g></g>应用 matrix，其内部所有子元素（含嵌套<g></g>、<path></path>）自动继承，无需逐个设置 -
逆变换还原：通过
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（对<svg></svg>外容器）协同优化
