Невозможно перевести координаты x,y экрана в координаты SVG. ⇐ Html

[Anonymous]

Я пытаюсь преобразовать позицию, полученную из события щелчка, в позицию, которая должна быть прикреплена к элементу, который я хочу добавить в свой . Каждый раз, когда я нажимаю, я хочу добавить элемент в то же место, где я щелкнул, скажем, например, круг. Я читал, что point.matrixTransform(svgRoot.getScreenCTM().inverse()); должен сделать свое дело и перевести координаты экрана в координаты SVG, но в моем случае это, похоже, не работает (координаты не переводятся в все). Эта проблема возникает, только если я добавляю

Код: Выделить всё

viewBoxАтрибут 

[/b] для моего . Я не знаю, что я здесь делаю не так. Может быть, в моем случае это не сработает, и мне нужно выполнить преобразование вручную?
Пример:

Код: Выделить всё

const drawingArea = document.querySelector('#drawing-area');
drawingArea.addEventListener('click', (e) => {
const { left, top } = drawingArea.getBoundingClientRect();
drawCircle({
x: e.clientX - left,
y: e.clientY - top});
});

const drawCircle = ({ x, y }, r = 10) => {
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('cx', x.toString());
circle.setAttribute('cy', y.toString());
circle.setAttribute('r', r.toString());
drawingArea.appendChild(circle);
}

const translateToSVGCoordinates = (x, y) => {
const point = drawingArea.createSVGPoint();
point.x = x;
point.y = y;
point.matrixTransform(drawingArea.getScreenCTM().inverse());
return { x: point.x, y: point.y };
}      

Код: Выделить всё

body, html {
width: 100%;
height: 100%;
margin: 0;
}

Код: Выделить всё

Если мне было недостаточно ясно, что ожидаемый результат, просто удалите

Код: Выделить всё

viewBoxАтрибут 

[/b] из элемента


Подробнее здесь: https://stackoverflow.com/questions/683 ... oordinates