如何使用SVG.js将变换烘焙至节点坐标以移除transform属性？

可以实现，核心是把元素的变换矩阵直接应用到自身原始坐标上，再清除transform属性，具体步骤和代码示例如下：

实现步骤 #

• 获取元素当前的变换矩阵：SVG.js的matrix()方法可以直接拿到元素累积的变换矩阵。
• 提取元素的原始坐标：不同图形用对应方法，比如polygon用array()获取顶点数组，rect用attr()获取x/y/width/height属性。
• 对坐标点应用矩阵变换：用矩阵的transform()方法处理每个坐标点，算出变换后的新坐标。
• 更新元素坐标并清除transform：把新坐标重新赋值给元素，同时清空transform属性。

代码示例（以polygon为例） #

// 初始化SVG并创建带缩放变换的polygon
const svg = SVG().addTo('body').size(300, 300);
const poly = svg.polygon('0,0 100,0 100,10 0,10').scale(2);

// 获取当前变换矩阵
const transformMatrix = poly.matrix();

// 获取原始顶点数组
const originalPoints = poly.array();

// 对每个顶点应用变换矩阵
const transformedPoints = originalPoints.map(point => transformMatrix.transform(point));

// 更新polygon坐标并清除transform属性
poly.plot(transformedPoints).transform('');

不同图形的适配说明 #

• rect元素：提取x、y、width、height属性，将这四个值组成的矩形边界用矩阵变换后，重新设置x/y/width/height属性。
• path元素：用path.array()获取路径命令数组，遍历数组中的坐标点做变换，最后用path.plot()更新路径。

内容的提问来源于stack exchange，提问作者Nik I.