如何用纯JavaScript获取应用transform的SVG路径d属性的当前实际值？

我正在使用纯JavaScript开发一款迷你SVG编辑器，需要生成无冗余的干净SVG文件，因此想咨询是否存在对应的公式、逻辑、算法等方案，可在SVG路径应用transform属性时，获取其当前实际的绘制路径命令（即d属性对应的坐标数值）？同时求相关的文档、文章、教程等资源，我目前未找到匹配的资料，主要是不清楚该技术主题对应的搜索关键词。

示例场景 #

<svg width="111" height="95" viewBox="0 0 111 95" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path id="my-path" transform="rotate(20)" d="M0.25 0L55 35L110.75 0V95L55 63L0.25 95V0Z" fill="#C4C4C4" />
</svg>

期望实现效果 #

const myPath = document.getElementById('my-path');
console.log(myPath.getRealValuesOfAttributeD());

// or

const getCurrentValuesOfAttributeD = (svgPathElement) => {
   // the formula, pattern, logic, algorithm, etc., goes here.
};


console.log(getCurrentValuesOfAttributeD(myPath));

解决方案 #

你要实现的操作业内一般叫「路径变换烘焙（transform baking）」或者「transform 应用到路径坐标」，原生SVG API已经提供了所有需要的工具，不需要手动实现复杂的矩阵运算，核心逻辑是把元素上累积的变换矩阵直接作用到d属性的每一个坐标点上即可：

核心实现步骤 #

• 第一步：获取目标path元素的累计变换矩阵，用原生API SVGElement.getCTM() 就能直接拿到，这个矩阵已经帮你把元素自身transform、父级所有transform、viewBox偏移都计算完成，不需要自己拆解rotate/translate/scale参数。
• 第二步：解析原d属性的每一段路径命令，你可以用 SVGPathElement.getPathData() 原生API，可以直接拿到结构化的每一段命令类型、对应坐标点数组。
• 第三步：把每一段里的所有坐标点，用 SVGPoint.matrixTransform() 方法和上面拿到的CTM做运算，得到变换后的坐标。
• 第四步：把变换后的结构化路径数据，序列化成新的d属性字符串即可。

可直接复用的实现代码 #

const getCurrentValuesOfAttributeD = (pathEl) => {
  // 获取元素累积变换矩阵
  const ctm = pathEl.getCTM();
  // 解析原始路径为结构化数据
  const originPathData = pathEl.getPathData();
  // 创建SVGPoint实例复用做坐标变换
  const svgPoint = pathEl.ownerSVGElement.createSVGPoint();

  // 逐段变换坐标
  const transformedPathData = originPathData.map(segment => {
    const newSegment = { ...segment };
    for (let i = 0; i < newSegment.values.length; i += 2) {
      svgPoint.x = newSegment.values[i];
      svgPoint.y = newSegment.values[i + 1];
      const transformed = svgPoint.matrixTransform(ctm);
      // 可根据需求调整数值精度
      newSegment.values[i] = +transformed.x.toFixed(4);
      newSegment.values[i + 1] = +transformed.y.toFixed(4);
    }
    return newSegment;
  });

  // 序列化为d属性字符串
  return pathEl.ownerSVGElement.createPathData(transformedPathData)
    .map(seg => `${seg.type}${seg.values.join(' ')}`).join('');
}

备注：如果运行环境不支持原生getPathData/createPathData API，引入W3C官方的对应polyfill即可正常使用，无需自己手写d属性解析逻辑。

相关搜索关键词 #

• SVG CTM (Current Transformation Matrix)
• SVG PathData API
• SVG transform baking
• SVG path coordinate transformation

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