SVG不同原点变换序列的CTM计算逻辑及脚本修正问询

一、transform-origin的作用逻辑 #

当元素同时设置transform序列（如skewX(45) translate(-100, 0) skewY(-45) skewX(25)）和transform-origin时，transform-origin是作用于整个变换序列的前后，而非每个变换单独生效。具体执行顺序为：

• 先将元素的坐标系原点平移到transform-origin指定的位置
• 按transform属性中从左到右的顺序执行所有变换操作，每个变换基于前一个变换后的坐标系
• 最后将坐标系原点平移回初始位置

原点本身不会随空间扭曲变化，它始终是SVG初始坐标系中的固定点，所有变换都基于这个固定原点完成坐标系转换。

二、正确计算CTM的步骤 #

要准确计算元素的累积变换矩阵（CTM），需严格遵循SVG的变换执行顺序：

1. 解析transform-origin：若为百分比值，需基于元素的边界框（bbox）计算实际像素坐标，得到原点(ox, oy)
2. 构建原点平移矩阵：生成将原点移到transform-origin的平移矩阵 M_origin_translate = translate(ox, oy)
3. 解析transform序列：将每个变换函数（skewX、translate等）转换为对应矩阵，按从左到右的顺序依次相乘，得到变换序列的总矩阵M_transform（注意矩阵乘法顺序：后一个变换矩阵乘在前一个结果上，SVG变换遵循右乘规则）
4. 构建原点还原矩阵：生成将原点移回初始位置的平移矩阵 M_origin_restore = translate(-ox, -oy)
5. 计算最终CTM：总矩阵为 M_origin_restore × M_transform × M_origin_translate（矩阵乘法顺序不可颠倒，SVG中变换组合是从右到左应用）

三、脚本修正要点 #

• 必须先执行transform-origin的原点平移，再处理transform序列的变换，最后还原原点
• 解析transform序列时，严格按从左到右的顺序将每个变换转换为矩阵并依次相乘，比如skewX(45) translate(-100,0)对应的矩阵是translate(-100,0) × skewX(45)
• 处理路径d属性时，将路径的每个顶点应用最终CTM变换，替换原路径的d值，同时移除元素的transform和transform-origin属性

内容的提问来源于stack exchange，提问作者DiD