基于SVG和JS实现类Windows画图工具的线条跳转问题求助

我帮你定位到了问题的核心，也整理了修复方案，咱们来看：

问题根源 #

你遇到的线条跳位，本质是**e.target的指向在鼠标移动时发生了变化**：

• 当你刚开始在SVG空白区域点击时，e.target是SVG元素，这时候getBoundingClientRect()拿到的是整个300x300的容器范围，坐标计算正常。
• 但当你画出第一条线条后，鼠标移动到这条线条上时，e.target会变成你刚创建的<line>元素——这条细线条的getBoundingClientRect()宽度只有2px（和stroke-width一致），用它来计算相对坐标自然会出错，导致线条跳转到奇怪的位置。

修复方案 #

我们需要做三个关键调整：

1. 提前保存SVG元素的固定引用，不再依赖e.target获取容器。
2. 始终用SVG元素的位置来计算相对坐标，不管鼠标当前悬停在哪个元素上。
3. 优化线条绘制逻辑，避免在mousemove时频繁创建新的DOM元素（既提升性能，也避免计数器混乱）。

修改后的完整代码 #

HTML（保持不变）

<div id="Test" > <svg height="300" width="300"></svg> </div>

JavaScript

let isDrawing = false;
let startX, startY;
let currentLine = null;

document.addEventListener('DOMContentLoaded', function() {
  // 提前获取SVG元素的固定引用
  const svg = document.querySelector('#Test svg');

  // 鼠标按下：初始化绘制状态，创建临时线条
  document.getElementById('Test').onmousedown = function(e) {
    const svgRect = svg.getBoundingClientRect();
    startX = e.clientX - svgRect.left;
    startY = e.clientY - svgRect.top;
    
    isDrawing = true;
    // 创建一条新的线条，作为当前绘制的临时线条
    currentLine = document.createElementNS("http://www.w3.org/2000/svg","line");
    currentLine.setAttributeNS(null,"x1", startX);
    currentLine.setAttributeNS(null,"y1", startY);
    currentLine.setAttributeNS(null,"x2", startX);
    currentLine.setAttributeNS(null,"y2", startY);
    currentLine.setAttribute("style","stroke:rgb(255,0,0);stroke-width:2;");
    svg.appendChild(currentLine);
  };

  // 鼠标抬起：结束绘制状态
  document.getElementById('Test').onmouseup = function() {
    isDrawing = false;
    currentLine = null;
  };

  // 鼠标离开容器：强制结束绘制
  document.getElementById('Test').onmouseleave = function() {
    isDrawing = false;
    currentLine = null;
    console.log(":(");
  };

  // 鼠标移动：更新线条终点
  document.getElementById('Test').onmousemove = function(e) {
    if (!isDrawing || !currentLine) return;
    
    const svgRect = svg.getBoundingClientRect();
    const endX = e.clientX - svgRect.left;
    const endY = e.clientY - svgRect.top;
    
    // 只更新当前线条的终点，不用每次创建新线条
    currentLine.setAttributeNS(null,"x2", endX);
    currentLine.setAttributeNS(null,"y2", endY);
  };
});

关键修改说明 #

• 固定SVG引用：用const svg = document.querySelector('#Test svg');提前获取SVG元素，后续所有坐标计算和元素操作都基于这个引用，彻底避免e.target的不确定性。
• 统一坐标计算：所有相对坐标都通过svg.getBoundingClientRect()来计算，确保不管鼠标悬停在SVG还是线条上，都能得到正确的相对位置。
• 优化绘制逻辑：只在mousedown时创建一条线条，mousemove时实时更新它的终点，mouseup时结束绘制。这种方式既减少了DOM元素的创建次数，也避免了原代码中i计数器导致的元素获取错误。

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