SVGPoint — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGPoint

Beschreibung

SVGPoint ist eine Schnittstelle aus SVG 1.1 und beschreibt einen Punkt mit den Eigenschaften x und y. Einen neuen Punkt erzeugt man klassisch über svgElement.createSVGPoint(). Die wichtigste Methode ist matrixTransform(matrix). Sie wendet eine Transformationsmatrix (SVGMatrix bzw. DOMMatrix) auf den Punkt an und gibt einen neuen Punkt zurück.

In der Praxis braucht man das vor allem, um Bildschirmkoordinaten (z. B. clientX/clientY eines Mausereignisses) in SVG-Benutzerkoordinaten umzurechnen. Das ist unverzichtbar, sobald ein viewBox, Skalierung oder verschachtelte transform-Attribute im Spiel sind. Anwendungsfälle sind Drag & Drop, Zeichenwerkzeuge und Treffertests. Zusätzlich liefern SVGGeometryElement.getPointAtLength() und die Einträge von SVGPointList (z. B. bei <polygon>) Punkte dieses Typs.

In SVG 2 wurde SVGPoint durch DOMPoint (Geometry Interfaces) ersetzt. In modernen Browsern ist SVGPoint nur noch ein Alias für DOMPoint. Das Ergebnis von createSVGPoint() ist also tatsächlich ein DOMPoint und hat zusätzlich z und w. Für neuen Code empfiehlt sich new DOMPoint(x, y).

Parameter

Name	Typ	Default	Beschreibung
$x	number	0	Eigenschaft: x-Koordinate des Punkts (lesbar und schreibbar).
$y	number	0	Eigenschaft: y-Koordinate des Punkts (lesbar und schreibbar).
$matrixTransform(matrix)	SVGMatrix \| DOMMatrix		Methode: wendet `matrix` auf den Punkt an und gibt einen neuen, transformierten Punkt zurück. Das Original bleibt unverändert.

Beispiele

Punkt erzeugen und transformieren

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

// Skalierung um Faktor 2, dann Verschiebung um (5, 5)
const m = svg.createSVGMatrix().translate(5, 5).scale(2);
const result = pt.matrixTransform(m);
console.log(result.x, result.y);
console.log(pt.x, pt.y); // Original unverändert

25 45 10 20

Mausposition in SVG-Koordinaten umrechnen

const svg = document.querySelector('svg');

const toSvgCoords = (evt) => {
  const pt = svg.createSVGPoint();
  pt.x = evt.clientX;
  pt.y = evt.clientY;
  // Umkehrung der Bildschirm-Transformation (berücksichtigt viewBox, Zoom, Scroll)
  return pt.matrixTransform(svg.getScreenCTM().inverse());
};

svg.addEventListener('click', (evt) => {
  const { x, y } = toSvgCoords(evt);
  console.log(`SVG-Koordinate: ${x.toFixed(1)}, ${y.toFixed(1)}`);
});

SVG-Koordinate: 123.4, 56.7

Punkt auf einem Pfad bestimmen

const path = document.querySelector('path');
const total = path.getTotalLength();
// Punkt in der Mitte des Pfads
const mid = path.getPointAtLength(total / 2);
console.log(mid.x, mid.y);

Moderne Alternative mit DOMPoint

const svg = document.querySelector('svg');
const el = document.querySelector('#kreis');

const p = new DOMPoint(100, 50);
// Von lokalen Element-Koordinaten in Bildschirmkoordinaten
const screen = p.matrixTransform(el.getScreenCTM());
console.log(screen.x, screen.y);

// Wichtig · Fallstricke

Veraltet: SVGPoint ist in SVG 2 durch DOMPoint ersetzt. Chrome, Firefox und Safari stellen SVGPoint nur noch als Alias bereit. Für neuen Code solltest du new DOMPoint() nutzen.
new SVGPoint() funktioniert in älteren Browsern nicht. Dort gibt es nur createSVGPoint(), und das nur auf einem <svg>-Element (SVGSVGElement).
matrixTransform() verändert den Punkt nicht. Das Ergebnis muss man weiterverwenden.
getScreenCTM() kann null zurückgeben, etwa wenn das Element nicht gerendert ist (display: none). Prüfe den Wert vor .inverse().
Punkte aus SVGPointList (z. B. polygon.points) sind „live“. Wenn du x/y änderst, ändert sich direkt das points-Attribut.

Siehe auch

DOMPoint DOMMatrix SVGSVGElement.createSVGPoint() SVGGraphicsElement.getScreenCTM() SVGGeometryElement.getPointAtLength() SVGPointList