如何获取animateMotion驱动的SVG沿路径移动圆形的实时坐标？

你之前读取circle.cx拿不到实时坐标的核心原因是：
animateMotion实现的元素运动，是通过给目标元素叠加动态变换矩阵实现的，全程不会修改circle元素本身的几何属性（也就是SVG标签里声明的cx、cy值）。这种情况下不管读cx.baseVal还是cx.animVal，拿到的永远是标签里写死的初始值60，不会随运动变化——animVal只有在动画直接修改对应几何属性时才会动态更新，和animateMotion的变换逻辑不是一套机制。

通过读取元素当前的累计变换矩阵，把元素局部坐标系下的圆心坐标投影到SVG视口坐标系下，就能拿到运动中的实时位置：

1. 用getCTM()获取circle元素从自身坐标系到SVG根视口的完整变换矩阵，这个矩阵会自动包含animateMotion动态施加的运动效果
2. 把circle自身局部坐标下的圆心位置，通过这个矩阵做坐标转换，就能得到SVG坐标系下的实时圆心值

修正后的示例代码 #

function clickCircle() {
  const circle = document.getElementById("circle");
  // 获取包含动画效果的完整变换矩阵
  const ctm = circle.getCTM();
  // circle自身局部坐标系下的固定圆心位置
  const localCenter = new DOMPoint(circle.cx.baseVal.value, circle.cy.baseVal.value);
  // 矩阵变换后得到SVG视口坐标系下的实时圆心
  const realCenter = localCenter.matrixTransform(ctm);
  
  console.log('实时圆心x坐标：', realCenter.x);
  console.log('实时圆心y坐标：', realCenter.y);
}

如果要做实时的鼠标悬浮检测、偏移量计算，可以参考下面的逻辑：

• 先把鼠标的页面坐标换算成和SVG同坐标系下的位置（用SVG元素的getBoundingClientRect()计算偏移）
• 实时获取运动圆形的圆心坐标
• 通过两点距离公式计算鼠标和圆心的距离，和圆形半径做对比，就能判断是否悬浮、计算偏移量

示例参考：

const svg = document.querySelector('svg');
const circle = document.getElementById('circle');
const circleRadius = circle.r.baseVal.value;

svg.addEventListener('mousemove', (e) => {
  // 计算鼠标在SVG坐标系下的坐标
  const svgRect = svg.getBoundingClientRect();
  const mouseSvgX = e.clientX - svgRect.left;
  const mouseSvgY = e.clientY - svgRect.top;

  // 计算圆形实时圆心位置
  const ctm = circle.getCTM();
  const localCenter = new DOMPoint(circle.cx.baseVal.value, circle.cy.baseVal.value);
  const realCenter = localCenter.matrixTransform(ctm);

  // 计算距离、判断悬浮状态
  const distance = Math.hypot(mouseSvgX - realCenter.x, mouseSvgY - realCenter.y);
  if (distance <= circleRadius) {
    console.log('鼠标悬浮在圆形上方');
  } else {
    console.log('鼠标与圆形边缘的偏移距离：', distance - circleRadius);
  }
})

你提供的原始示例里，animateMotion的路径定义存在语法小问题：贝塞尔曲线参数C180-60缺少逗号分隔，应改为C180,-60，否则会导致路径解析异常、运动轨迹不符合预期。

内容的提问来源于stack exchange，提问作者Bart van de Rotsheide