SVGSVGElement.createSVGPoint() — Methode · JavaScript-Referenz

Signatur

SVGSVGElement.prototype.createSVGPoint()

Beschreibung

createSVGPoint() ist eine Fabrikmethode des <svg>-Elements. Sie liefert ein neues Punktobjekt mit x = 0 und y = 0, das zu keinem Dokumentbaum gehört. In aktuellen Browsern ist das Ergebnis ein DOMPoint (früher das eigene Interface SVGPoint, das heute nur noch ein Alias ist).

Am häufigsten braucht man die Methode, um Bildschirmkoordinaten in SVG-Koordinaten umzurechnen. Mausposition (clientX/clientY) in den Punkt schreiben, dann mit matrixTransform() die invertierte Matrix aus getScreenCTM() anwenden. Heraus kommt die Position im Benutzerkoordinatensystem, das durch viewBox, Skalierung und Transformationen entsteht. Umgekehrt lassen sich SVG-Koordinaten so auch in Bildschirmkoordinaten umrechnen.

Außerdem wird das Punktobjekt von Methoden wie SVGGeometryElement.isPointInFill() und isPointInStroke() erwartet, zumindest in älteren Implementierungen. Für neuen Code kann man stattdessen direkt new DOMPoint(x, y) verwenden. Das Ergebnis ist gleichwertig, und man braucht dafür kein <svg>-Element.

Rückgabewert

Typ

DOMPoint

Beschreibung

Ein neuer Punkt mit x = 0, y = 0, z = 0 und w = 1. Er gehört zu keinem Dokument und kann beliebig verändert werden.

Beispiele

Punkt erzeugen und befüllen

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const pt = svg.createSVGPoint();
console.log(pt.x, pt.y);

pt.x = 120;
pt.y = 45;
console.log(pt instanceof DOMPoint, pt.x, pt.y);

0 0 true 120 45

Mausposition in SVG-Koordinaten umrechnen

// <svg id="zeichnung" viewBox="0 0 100 100" width="400" height="400"></svg>
const svg = document.getElementById('zeichnung');
const pt = svg.createSVGPoint(); // einmal anlegen und wiederverwenden

svg.addEventListener('pointermove', (event) => {
  pt.x = event.clientX;
  pt.y = event.clientY;
  const ctm = svg.getScreenCTM();
  if (!ctm) return; // z. B. wenn display: none gesetzt ist
  const svgPt = pt.matrixTransform(ctm.inverse());
  console.log(`SVG: ${svgPt.x.toFixed(1)} / ${svgPt.y.toFixed(1)}`);
});

SVG: 25.0 / 50.0 (bei Mausposition 100/200 px relativ zum SVG)

Klick innerhalb eines Pfades prüfen

// <svg id="karte" viewBox="0 0 200 200"><path id="region" d="M10 10 H110 V110 H10 Z"/></svg>
const svg = document.getElementById('karte');
const region = document.getElementById('region');

svg.addEventListener('click', (event) => {
  const pt = svg.createSVGPoint();
  pt.x = event.clientX;
  pt.y = event.clientY;
  // In das lokale Koordinatensystem des Pfades umrechnen
  const local = pt.matrixTransform(region.getScreenCTM().inverse());
  const inside = region.isPointInFill(local);
  console.log(inside ? 'Treffer in der Region' : 'Außerhalb');
});

Treffer in der Region

// Wichtig · Fallstricke

Veraltete Schnittstelle: In SVG 2 gilt createSVGPoint() nur noch aus Kompatibilitätsgründen. Für neuen Code ist new DOMPoint(x, y) die bessere Wahl. Es funktioniert auch ohne <svg>-Element und in Web Workern.
matrixTransform() gibt einen neuen Punkt zurück, der ursprüngliche Punkt bleibt unverändert. Wer das Ergebnis weiterverwenden will, muss es einer Variablen zuweisen.
getScreenCTM() kann null liefern, etwa wenn das Element nicht dargestellt wird (display: none) oder noch nicht im Dokument hängt. Das vor dem Aufruf von inverse() prüfen.
Bei häufigen Ereignissen wie pointermove spart es Speicher, einen einzigen Punkt anzulegen und wiederzuverwenden, statt bei jedem Ereignis einen neuen zu erzeugen.
Die Methode gibt es nur auf SVGSVGElement, also dem <svg>-Element, nicht auf anderen SVG-Elementen. Sie wird von allen gängigen Browsern unterstützt.

Siehe auch

DOMPointReadOnly.prototype.matrixTransform() SVGGraphicsElement.prototype.getScreenCTM() SVGSVGElement.prototype.createSVGMatrix() SVGGeometryElement.prototype.isPointInFill() SVGSVGElement