XY-Koordinaten des Bildschirms können nicht in SVG-Koordinaten umgewandelt werden ⇐ HTML

[Guest]

Ich versuche, die vom Klickereignis übernommene Position in die Position zu übersetzen, die an das Element angehängt werden soll, das ich an meinen anhängen möchte. Jedes Mal, wenn ich klicke, möchte ich an derselben Stelle, an der ich geklickt habe, ein Element hinzufügen, beispielsweise einen Kreis. Ich habe gelesen, dass point.matrixTransform(svgRoot.getScreenCTM().inverse()); den Trick machen und Bildschirmkoordinaten in SVG-Koordinaten übersetzen sollte, aber in meinem Fall scheint es nicht zu funktionieren (Koordinaten werden nicht übersetzt). alle). Dieses Problem tritt nur auf, wenn ich hinzufüge

Code: Select all

viewBox

[/b]-Attribut zu meinem hinzufügen. Ich weiß nicht, was ich hier falsch mache. Vielleicht funktioniert das in meinem Fall nicht und ich muss die Konvertierung manuell durchführen?
Beispiel:

Code: Select all

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 };
}      

Code: Select all

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

Code: Select all

Wenn mir nicht klar genug wäre, was Ergebnis, das ich erwarte, entfernen Sie einfach

Code: Select all

viewBox

[/b]-Attribut aus -Element