SVG平移缩放变换后d3.mouse异常：手动节点连线不跟随鼠标

我太懂这个痛点了——当SVG做了平移（translate）和缩放（scale）之后，手动拖连线时鼠标和线对不上，本质是屏幕坐标和SVG内部的用户坐标没做正确映射。鼠标事件返回的clientX/Y是相对于浏览器视口的，而SVG内部的元素坐标已经被变换矩阵修改了，直接用屏幕坐标去更新连线肯定会错位。

下面给你一套靠谱的解决方案，核心是把屏幕坐标转换为SVG内部的用户坐标：

关键思路：坐标变换映射 #

SVG提供了原生API来处理坐标转换，不用自己手动算矩阵（手动算容易错，尤其是多个变换叠加时）：

1. 获取SVG元素的屏幕变换矩阵（CTM），它包含了所有平移、缩放等变换的组合
2. 计算这个矩阵的逆矩阵，用来把屏幕坐标反向转换为SVG内部的用户坐标
3. 用转换后的坐标更新临时连线的终点，就能让线精准跟着鼠标走

具体代码实现 #

假设你的SVG节点ID是graph-svg，节点是<circle>元素（如果是其他形状，调整坐标属性即可）：

1. 封装坐标转换函数 #

const svg = document.getElementById('graph-svg');

// 把屏幕坐标转换为SVG内部的用户坐标
function screenToSvg(clientX, clientY) {
  const point = svg.createSVGPoint();
  point.x = clientX;
  point.y = clientY;
  // 获取逆变换矩阵，将屏幕坐标映射回SVG用户坐标
  const inverseCTM = svg.getScreenCTM().inverse();
  return point.matrixTransform(inverseCTM);
}

2. 完整连线逻辑实现 #

let tempLine = null; // 临时跟随鼠标的连线
let startNode = null; // 第一个选中的节点

// 监听节点点击，触发连线创建流程
document.querySelectorAll('.node').forEach(node => {
  node.addEventListener('click', (e) => {
    if (!startNode) {
      // 选中第一个节点，创建临时连线
      startNode = e.target;
      tempLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      tempLine.setAttribute('x1', startNode.getAttribute('cx'));
      tempLine.setAttribute('y1', startNode.getAttribute('cy'));
      tempLine.setAttribute('stroke', '#333');
      tempLine.setAttribute('stroke-width', 2);
      tempLine.setAttribute('stroke-dasharray', '5,3'); // 虚线表示临时连线
      svg.appendChild(tempLine);

      // 开始监听鼠标移动
      document.addEventListener('mousemove', handleMouseMove);
    } else {
      // 选中第二个节点，完成连线
      const endNode = e.target;
      tempLine.setAttribute('x2', endNode.getAttribute('cx'));
      tempLine.setAttribute('y2', endNode.getAttribute('cy'));
      tempLine.removeAttribute('stroke-dasharray'); // 转为实线

      // 清理临时变量和监听
      document.removeEventListener('mousemove', handleMouseMove);
      tempLine = null;
      startNode = null;
    }
  });
});

// 鼠标移动时更新临时连线终点
function handleMouseMove(e) {
  if (!tempLine) return;
  const svgPoint = screenToSvg(e.clientX, e.clientY);
  tempLine.setAttribute('x2', svgPoint.x);
  tempLine.setAttribute('y2', svgPoint.y);
}

关键细节说明 #

• getScreenCTM()：获取SVG元素到浏览器屏幕的完整变换矩阵，不管你是对整个SVG做了平移缩放，还是嵌套在<g>里做了变换，它都能准确捕捉所有变换效果
• inverse()：生成逆矩阵，这一步是核心——把屏幕坐标“还原”成SVG内部的原始坐标系统
• createSVGPoint() + matrixTransform()：这是SVG原生的坐标变换方法，比手动计算矩阵乘法可靠得多，能处理所有复杂变换场景

额外注意事项 #

• 如果你的变换是应用在<g>元素上而不是整个SVG，那要把svg.getScreenCTM()换成gElement.getScreenCTM()，确保获取的是目标元素的变换矩阵
• 记得在连线完成后移除mousemove监听，避免不必要的性能消耗
• 如果节点是复杂形状（比如<rect>），要调整坐标属性（比如用x/y加上宽高的一半来获取中心坐标）

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