Javascript 如何在firefox浏览器中使用offsetX和offsetY在svg中移动圆圈？

我已经用javascript编写了一些代码，它允许用户在svg中操纵一个圆圈

我在下面提供了一些代码。在这里你可以移动一个圆圈。在Chrome和Egde上都能完美工作。在Firefox上，它不起作用。当我移动圆圈时，它几乎每秒传送一个像素到左上角。我有67.0.4版

下面的代码在html文件中使用id为“svg”的svg

---

使用

clientX

和

clientY

。我认为

offsetX

和

offsetY

在Firefox中不受欢迎

const svg=document.getElementById（'svg'）；
const circle=document.createElements（“http://www.w3.org/2000/svg“，”圆圈“）；
circle.setAttribute（“cx”、“100px”）；
circle.setAttribute（“cy”、“100px”）；
circle.setAttribute（“r”，“50px”）；
circle.setAttribute（“填充”、“蓝色”）；
svg.appendChild（圆）；
设为假；
svg.addEventListener（“鼠标向下”（e）=>{
按下=真；
});
svg.addEventListener（“mousemove”，（e）=>{
如果（按下）{
circle.setAttribute（“cx”，e.clientX）；
circle.setAttribute（“cy”，即clientY）；
}
});
svg.addEventListener（“mouseup”，（e）=>{
按下=假；
});
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;
});