如何确保SVG路径拖拽到不同div容器时保持原X/Y坐标位置？

这个问题我之前做SVG拖拽交互时也踩过坑！核心问题出在SVG坐标系统和HTML元素坐标系统不兼容——你用的svg.draggable.js默认是基于SVG容器的内部坐标计算拖拽位置，但当你把元素移到普通div（save）里时，这个坐标没法直接复用，自然就偏移了。下面给你几个可行的解决思路：

解决思路和具体方案 #

方案1：拖拽结束时手动转换坐标 #

这是最稳妥的方法，核心是把SVG内部的坐标转换成目标div的相对坐标：

1. 先获取SVG容器和目标div相对于浏览器视口的位置（用getBoundingClientRect()）；
2. 拿到拖拽元素在SVG内的当前坐标；
3. 计算出元素相对于目标div的正确位置，再移动过去。

代码示例：

// 初始化拖拽
const leftLeg = SVG('#leftLeg');
leftLeg.draggable({
  onDragStop: function(event) {
    // 获取容器的视口位置
    const canvasRect = document.getElementById('canvas').getBoundingClientRect();
    const saveRect = document.getElementById('save').getBoundingClientRect();
    
    // 获取元素在SVG内的坐标（svg.draggable.js提供的x()/y()方法）
    const svgLocalX = this.x();
    const svgLocalY = this.y();
    
    // 转换为save容器的相对坐标
    const targetX = svgLocalX + canvasRect.left - saveRect.left;
    const targetY = svgLocalY + canvasRect.top - saveRect.top;
    
    // 移动元素到save容器并设置正确位置
    this.moveTo(document.getElementById('save')).x(targetX).y(targetY);
  }
});

方案2：修改拖拽插件的坐标参考系 #

如果你的svg.draggable.js支持配置坐标参考源，可以直接把拖拽坐标的基准从SVG容器改成整个文档，这样拿到的坐标就是页面全局坐标，转换起来更简单：

leftLeg.draggable({
  // 把参考系设为document.body，拖拽时的x/y是相对于页面的
  reference: document.body,
  onDragStop: function(event) {
    const saveRect = document.getElementById('save').getBoundingClientRect();
    // 全局坐标减去save容器的偏移，就是容器内的相对坐标
    this.moveTo(document.getElementById('save'))
        .x(this.x() - saveRect.left)
        .y(this.y() - saveRect.top);
  }
});

额外注意：SVG viewBox缩放的情况 #

如果你的SVG设置了viewBox属性，导致SVG内部坐标和实际显示尺寸有缩放比例，还需要把SVG内部坐标乘以缩放系数：

const canvas = document.getElementById('canvas');
// 计算SVG的缩放比例
const scaleX = canvas.clientWidth / canvas.viewBox.baseVal.width;
const scaleY = canvas.clientHeight / canvas.viewBox.baseVal.height;

// 在坐标转换时加入缩放计算
const targetX = (svgLocalX * scaleX) + canvasRect.left - saveRect.left;
const targetY = (svgLocalY * scaleY) + canvasRect.top - saveRect.top;

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