Как переместить круг внутри SVG в браузере Firefox с помощью offsetX и offsetY?

Question

Я написал некоторый код в javascript, который позволяет пользователю манипулировать кругом внутри SVG.

Я предоставил код ниже. Здесь вы можете перемещать круг. На Chrome так же как и на Egde он работает отлично. На Firefox это не работает. Когда я перемещаю круг, он перемещает почти каждый второй пиксель в верхний левый угол. У меня версия 67.0.4.

Следующий код использует svg с идентификатором "svg" из html-файла.

Пример Codepen

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 устарели в Firefox

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>