SVG getCTM()未返回预期x/y值 如何获取元素变换绝对坐标

你之前的计算结果和预期不符，本质是对getCTM()的返回值理解有偏差：

• getCTM()返回的变换矩阵，仅描述元素自身局部坐标系到目标坐标系的映射规则，只会累计所有父级+元素自身transform属性的变换效果，不会自动把元素的几何属性（比如圆形的cx/cy、矩形的x/y）算入平移量
• 你之前拿到的convertedMatrix.e=210、convertedMatrix.f=510，实际是圆形局部坐标系原点在SVG坐标系下的位置：所有transform的平移量累加刚好是10+100+100=210、10+100+400=510，差的部分就是圆形cx/cy经过scale(2)缩放后的偏移量25*2=50，和你预期的差值完全吻合。

不需要手动解析各级transform做累加，直接用SVG原生坐标转换API即可，兼容任意层数嵌套、任意类型的transform变换：

// 获取SVG根元素和目标圆形
const svgRoot = document.querySelector('svg');
const targetCircle = document.querySelector('#circ');

// 获取圆形局部坐标系到SVG根坐标系的累积变换矩阵
const transformMatrix = targetCircle.getCTM();

// 构造圆形在自身局部坐标系下的中心点
const localCenter = svgRoot.createSVGPoint();
localCenter.x = targetCircle.cx.baseVal.value;
localCenter.y = targetCircle.cy.baseVal.value;

// 将局部点通过矩阵转换为SVG坐标系下的绝对坐标
const absoluteCenter = localCenter.matrixTransform(transformMatrix);

console.log(absoluteCenter.x, absoluteCenter.y); // 输出 260 560，完全符合预期

• 矩阵的e、f分量仅代表局部坐标系原点的平移位置，不是元素上具体几何点的最终坐标，必须把对应几何点带入矩阵做转换才能拿到正确位置
• 这套逻辑对所有SVG图形元素通用：如果是矩形就取自身x/y属性做局部点，如果是路径就取需要计算的路径点局部坐标即可，不需要关心嵌套层级和transform的组合规则
• 你之前写的toCTM.inverse().multiply(fromCTM)逻辑本身是对的，作用是把坐标转换到SVG根元素的坐标系下，当你需要把坐标转换到任意其他SVG元素坐标系时，都可以用这个矩阵乘法逻辑实现。

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