如何在 Firefox 浏览器中使用 offsetX 和 offsetY 在 svg 内移动圆圈

Question

我用javascript编写了一些代码，它允许用户在svg中操作一个圆。

我在下面提供了一些代码。在这里你可以移动一个圆圈。在Chrome和Egde上，它可以完美运行。在火狐上它不起作用。当我移动圆圈时，它几乎每隔一个像素就会传送到左上角。我有版本 67.0.4。

以下代码在 html 文件中使用 id 为"svg"的 svg。

代码笔示例

const svg = document.getElementById('svg');
const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("cx", "100px");
circle.setAttribute("cy", "100px");
circle.setAttribute("r", "50px");
circle.setAttribute("fill", "blue");
svg.appendChild(circle);
let pressed = false;
svg.addEventListener("mousedown", (e) => {
  pressed = true;
});
svg.addEventListener("mousemove", (e) => {
  if (pressed) {
    circle.setAttribute("cx", e.offsetX);
    circle.setAttribute("cy", e.offsetY);
  }
});
svg.addEventListener("mouseup", (e) => {
  pressed = false;
});

Answer 1

使用 clientX 和 clientY 。我认为offsetX和offsetY在火狐中已弃用

const svg = document.getElementById('svg');
const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("cx", "100px");
circle.setAttribute("cy", "100px");
circle.setAttribute("r", "50px");
circle.setAttribute("fill", "blue");
svg.appendChild(circle);
let pressed = false;
svg.addEventListener("mousedown", (e) => {
  pressed = true;
});
svg.addEventListener("mousemove", (e) => {
  if (pressed) {
    circle.setAttribute("cx", e.clientX);
    circle.setAttribute("cy", e.clientY);
  }
});
svg.addEventListener("mouseup", (e) => {
  pressed = false;
});

svg {
  background: grey;
}

<svg id="svg" width="300" height="200"><svg>