JavaScript中SVG缩放平移后拖拽元素的节点位置如何校正？

我开发了一个基于SVG的有向图可视化脚本，输入数据格式如下：

let data = {
  'A': {
    'children': ['B', 'C'],
    'parents': [],
    'coords': {
      'x': 10,
      'y': 10
    }
  },
  'B': {
    'children': ['C'],
    'parents': ['A'],
    'coords': {
      'x': 30,
      'y': 10
    }
  },
  'C': {
    'children': [],
    'parents': ['A', 'B'],
    'coords': {
      'x': 20,
      'y': 20
    }
  }
}

脚本通过三次贝塞尔曲线绘制父子节点间的路径，原本支持实时拖拽节点调整位置，但添加缩放平移功能后，拖拽节点时元素会被放置到错误位置。当前拖拽相关函数如下：

function startDrag(evt) {
    if (evt.target.classList.contains('draggable')) {
      selectedElement = evt.target;

      // 存储连接到节点的路径ID，以便更新它们的位置
      // 路径ID格式为 `${parent_key}_to_${child_key}`，例如 #A_to_I
      path_ids = [];
      let node_key = selectedElement.getAttributeNS(null, 'id');
      for (let child_key of data[node_key]['children']) {
        path_ids.push(`${node_key}_to_${child_key}`);
      }
      for (let parent_key of data[node_key]['parents']) {
        path_ids.push(`${parent_key}_to_${node_key}`);
      }
    }
  }
  
  function drag(evt) {
    if (selectedElement) {
      evt.preventDefault();
      
      // 获取缩放平移信息，用于计算正确的节点位置
      let matrix = document.getElementById('scene').getAttributeNS(null, 'transform');
      let m = matrix.slice(7, matrix.length-1).split(' ');
      let zoomFactor = m[0];
      let panX = m[4];
      let panY = m[5];

      let svgBBox = svg.getBBox();

      // 移动节点本身
      selectedElement.setAttributeNS(null, 'cx', evt.clientX);
      selectedElement.setAttributeNS(null, 'cy', evt.clientY);
      
      // 更新连接路径的贝塞尔曲线顶点
      // 如果路径ID以当前节点开头，修改起点；如果以当前节点结尾，修改终点
      let clicked_node = selectedElement.getAttributeNS(null, 'id');
      for (let path_id of path_ids) {
        let path = document.getElementById(path_id);
        let bez_d = path.getAttributeNS(null, 'd');
        let bez_split = bez_d.split(' ');
        if (path_id.startsWith(clicked_node)) {
          let new_d = `M ${evt.clientX} ${evt.clientY} C ${evt.clientX},${evt.clientY}`;
          new_d += ` ${bez_split[5]} ${bez_split[6]}`;
          path.setAttributeNS(null, 'd', new_d);
        } else if (path_id.endsWith(clicked_node)) {
          let new_d = `M ${bez_split[1]} ${bez_split[2]} C ${bez_split[4]} ${bez_split[5]}`;
          new_d += ` ${evt.clientX},${evt.clientY}`;
          path.setAttributeNS(null, 'd', new_d);
        }
      }
    }
  }
  
  function endDrag(evt) {
    selectedElement = null;
    path_ids = [];
  }

目前已经能获取容纳所有可拖拽节点的<g>元素的transform矩阵（包含缩放系数zoomFactor、平移量panX、panY）以及SVG的BBox数据，但不清楚如何利用这些数据计算正确的节点位置。

简言之：如何在更新可拖拽SVG元素位置时，适配缩放平移操作？

问题核心在于：直接使用evt.clientX/Y（屏幕坐标）设置节点的cx/cy（SVG内部坐标），但<g>的缩放平移会让两个坐标系统不匹配。需要把屏幕坐标转换为<g>内部的本地坐标。

具体修改步骤 #

1. 使用SVG原生坐标转换API：利用SVGElement.getScreenCTM()和SVGMatrix.inverse()计算逆变换矩阵，将屏幕坐标转换为<g>元素的本地坐标。
2. 替换坐标设置逻辑：用转换后的本地坐标更新节点位置和路径顶点。

修改后的drag函数如下：

function drag(evt) {
  if (selectedElement) {
    evt.preventDefault();
    
    const scene = document.getElementById('scene');
    // 获取场景的变换矩阵，并计算逆矩阵（用于将屏幕坐标转成本地坐标）
    const ctm = scene.getScreenCTM();
    const inverseMatrix = ctm.inverse();
    
    // 创建SVG点，将屏幕坐标转换为场景内部的本地坐标
    const point = svg.createSVGPoint();
    point.x = evt.clientX;
    point.y = evt.clientY;
    const localPoint = point.matrixTransform(inverseMatrix);

    // 更新节点位置（使用转换后的本地坐标）
    selectedElement.setAttributeNS(null, 'cx', localPoint.x);
    selectedElement.setAttributeNS(null, 'cy', localPoint.y);
    
    // 更新连接路径的贝塞尔曲线顶点
    const clicked_node = selectedElement.getAttributeNS(null, 'id');
    for (const path_id of path_ids) {
      const path = document.getElementById(path_id);
      const bez_d = path.getAttributeNS(null, 'd');
      const bez_split = bez_d.split(' ');
      if (path_id.startsWith(clicked_node)) {
        const new_d = `M ${localPoint.x} ${localPoint.y} C ${localPoint.x},${localPoint.y} ${bez_split[5]} ${bez_split[6]}`;
        path.setAttributeNS(null, 'd', new_d);
      } else if (path_id.endsWith(clicked_node)) {
        const new_d = `M ${bez_split[1]} ${bez_split[2]} C ${bez_split[4]} ${bez_split[5]} ${localPoint.x},${localPoint.y}`;
        path.setAttributeNS(null, 'd', new_d);
      }
    }
  }
}

关键说明 #

• getScreenCTM()返回元素从本地坐标到屏幕坐标的变换矩阵，inverse()得到其逆矩阵，用于反向转换坐标。
• createSVGPoint()配合matrixTransform()可以准确完成坐标系统转换，自动适配缩放、平移甚至旋转等变换，比手动解析transform字符串更可靠。
• 无需手动处理zoomFactor、panX、panY，API会自动处理所有变换逻辑。

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