获取SVG路径点相对于DOM（而非父SVG）的位置

问题核心 #

你遇到的定位偏差，本质是SVG内部坐标系与页面DOM坐标系不匹配——直接用getBoundingClientRect()叠加内部坐标，无法处理SVG的viewBox、缩放、transform变换等场景，导致坐标映射错误。

正确的坐标转换方案 #

要实现外部图片精准对齐任意SVG内的路径点，需要通过SVG的变换矩阵完成坐标映射，步骤如下：

1. 编写SVG内部坐标转页面坐标的函数 #

利用SVG自带的getScreenCTM()获取元素到屏幕坐标系的变换矩阵，再通过matrixTransform将内部点转换为页面坐标：

function svgPointToPage(svg, x, y) {
  const point = svg.createSVGPoint();
  point.x = x;
  point.y = y;
  // 应用SVG到页面的完整变换矩阵（包含viewBox、缩放、滚动等）
  const pagePoint = point.matrixTransform(svg.getScreenCTM());
  return { x: pagePoint.x, y: pagePoint.y };
}

2. 定位并旋转外部图片 #

结合路径点获取、坐标转换、角度计算，完成图片的精准移动：

// 1. 获取目标SVG和路径
const targetSvg = document.getElementById('target-svg');
const targetPath = targetSvg.querySelector('#target-path');

// 2. 获取路径上的目标点（示例取路径长度50px处的点）
const tempDistance = 50;
const tempPoint = targetPath.getPointAtLength(tempDistance);

// 3. 转换为页面坐标
const pagePoint = svgPointToPage(targetSvg, tempPoint.x, tempPoint.y);

// 4. 计算路径切线角度（实现图片沿路径旋转）
const nextPoint = targetPath.getPointAtLength(tempDistance + 1);
const dx = nextPoint.x - tempPoint.x;
const dy = nextPoint.y - tempPoint.y;
const deg = Math.atan2(dy, dx) * 180 / Math.PI;

// 5. 设置图片位置（若图片需中心点对齐路径点，需减去自身宽高的一半）
const handz = document.querySelector('.handz');
const imgOffsetX = handz.offsetWidth / 2;
const imgOffsetY = handz.offsetHeight / 2;
handz.style.transform = `translate(${pagePoint.x - imgOffsetX}px, ${pagePoint.y - imgOffsetY}px) rotate(${deg}deg)`;

3. 动态场景处理 #

如果SVG存在窗口缩放、自身transform动画等动态变化，需要在对应事件（如resize、transitionend）中重新执行坐标转换和定位逻辑，保证位置始终精准。

原函数无效的原因 #

你之前的实现仅简单叠加元素视口位置与内部坐标，忽略了以下关键因素：

• SVG的viewBox会对内部坐标做缩放、平移映射
• SVG自身的transform属性（如scale、translate）会改变坐标映射关系
• 页面滚动会影响getBoundingClientRect()的结果（getScreenCTM()已自动包含滚动修正）

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