XY-Koordinaten des Bildschirms können nicht in SVG-Koordinaten umgewandelt werden
Posted: 03 Jan 2025, 10:24
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[/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:
Wenn mir nicht klar genug wäre, was Ergebnis, das ich erwarte, entfernen Sie einfach[/b]-Attribut aus -Element
Code: Select all
viewBoxBeispiel:
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