Firefox浏览器中使用offsetX/offsetY移动SVG内圆形异常问题排查

这个问题我太熟悉了！Firefox在处理SVG元素的鼠标事件坐标时，和Chrome、Edge这类Chromium系浏览器有明显差异，再加上你的代码里还踩了个SVG属性单位的小坑，就导致了拖动时瞬移左上角的问题。我来帮你一步步修复：

问题根源 #

1. SVG属性单位错误：你给圆形的cx、cy、r属性加了px单位，但SVG的坐标属性（比如cx、cy、r）默认就是用户单位（通常对应屏幕像素），不需要显式写px。Firefox对这种带单位的属性值解析会出现异常，和后续赋值的纯数字冲突。
2. 鼠标坐标计算差异：Firefox中offsetX/offsetY对于SVG元素的计算逻辑和Chromium不同，它是相对于元素的布局边界框，而非SVG内部的坐标系统，导致坐标错位。

修复后的完整代码 #

const svg = document.getElementById('svg');
const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");

// 去掉属性的px单位，使用SVG默认的用户单位
circle.setAttribute("cx", "100");
circle.setAttribute("cy", "100");
circle.setAttribute("r", "50");
circle.setAttribute("fill", "blue");
svg.appendChild(circle);

let pressed = false;

svg.addEventListener("mousedown", (e) => {
  // 可以加个判断，确保点击的是圆形再触发拖动
  if (e.target === circle) {
    pressed = true;
  }
});

svg.addEventListener("mousemove", (e) => {
  if (pressed) {
    // 使用SVG的坐标转换API获取准确的内部坐标
    const point = svg.createSVGPoint();
    point.x = e.clientX;
    point.y = e.clientY;
    // 将屏幕坐标转换为SVG内部坐标
    const svgPoint = point.matrixTransform(svg.getScreenCTM().inverse());
    
    circle.setAttribute("cx", svgPoint.x);
    circle.setAttribute("cy", svgPoint.y);
  }
});

svg.addEventListener("mouseup", (e) => {
  pressed = false;
});

关键修复点说明 #

• 移除属性单位：把"100px"改成"100"，让SVG用默认的用户单位解析，避免Firefox的解析冲突。
• 坐标转换：用createSVGPoint()和matrixTransform()方法，把鼠标的屏幕坐标（clientX/clientY）转换为SVG内部的坐标系统，这个方法是SVG标准API，所有现代浏览器（包括Firefox 67.0.4）都支持，能保证跨浏览器的一致性。
• 优化拖动触发：加了e.target === circle的判断，只有点击圆形时才触发拖动，避免点击SVG空白区域也移动圆形的问题。

这样修改后，你的圆形拖动在Firefox里就能和Chrome、Edge一样正常工作了！

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