Signatur
Beschreibung
Die schreibgeschützte Eigenschaft points des Interfaces SVGPolygonElement gibt eine SVGPointList zurück. Diese Liste enthält den Basiswert des points-Attributs, also den Wert ohne Einfluss von SMIL-Animationen. Jeder Eintrag ist ein Punkt mit den Koordinaten x und y.
„Schreibgeschützt“ heißt hier nur: Man kann polygon.points kein neues Objekt zuweisen. Die Liste selbst lässt sich aber ändern. Sie ist lebendig: Methoden wie appendItem(), insertItemBefore(), replaceItem(), removeItem() und clear() ändern sofort das points-Attribut im DOM. Wenn man die Koordinaten eines vorhandenen Punkts direkt ändert (point.x = 10), wird das Attribut ebenfalls aktualisiert. Umgekehrt ändert sich die Liste, wenn das Attribut per setAttribute() geändert wird.
Die Eigenschaft ist nützlich, wenn man Polygone Punkt für Punkt lesen oder bearbeiten will, etwa in Diagramm-Editoren, für Hit-Tests, zum Berechnen von Flächen oder Umfängen oder für interaktives Ziehen einzelner Eckpunkte. So muss man die Attribut-Zeichenkette nicht selbst zerlegen und wieder zusammensetzen. Für den gerade animierten Wert gibt es die Eigenschaft animatedPoints.
Rückgabewert
DOMPoint bzw. früher SVGPoint) mit den Eigenschaften length/numberOfItems und Methoden wie getItem(), appendItem(), removeItem(). Jede Änderung wird sofort ins points-Attribut übernommen.Beispiele
Eckpunkte eines Polygons auslesen
const svg = document.querySelector('svg');
const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
polygon.setAttribute('points', '0,0 100,0 50,80');
svg.append(polygon);
const { points } = polygon;
console.log(points.numberOfItems);
for (let i = 0; i < points.numberOfItems; i++) {
const p = points.getItem(i);
console.log(`Punkt ${i}: (${p.x}, ${p.y})`);
}Punkt anhängen und einzelnen Punkt verschieben
const svg = document.querySelector('svg');
const polygon = svg.querySelector('polygon'); // points="0,0 100,0 50,80"
// Neuen Punkt über das SVG-Wurzelelement erzeugen (breiteste Kompatibilität)
const p = svg.createSVGPoint();
p.x = 0;
p.y = 80;
polygon.points.appendItem(p);
// Vorhandenen Eckpunkt direkt ändern – das Attribut wird mitgeführt
polygon.points.getItem(1).x = 120;
console.log(polygon.getAttribute('points'));Fläche eines Polygons berechnen (Gaußsche Trapezformel)
const polygonArea = (polygon) => {
const pts = Array.from({ length: polygon.points.numberOfItems },
(_, i) => polygon.points.getItem(i));
let sum = 0;
pts.forEach((p, i) => {
const q = pts[(i + 1) % pts.length];
sum += p.x * q.y - q.x * p.y;
});
return Math.abs(sum) / 2;
};
const poly = document.querySelector('polygon');
poly.setAttribute('points', '0,0 100,0 100,50 0,50');
console.log(polygonArea(poly));// Wichtig · Fallstricke
- Schreibschutz betrifft nur die Referenz:
polygon.points = …hat keine Wirkung (im Strict Mode wird einTypeErrorgeworfen). Um alle Punkte zu ersetzen, nutzt mansetAttribute('points', …)oderpoints.clear()und danachappendItem(). - Ein Punkt kann nur in einer Liste stehen: Fügt man per
appendItem()einen Punkt ein, der schon zu einer anderen Liste gehört, wird er dort entfernt oder als Kopie eingefügt, je nach Implementierung. Am sichersten ist es, für jede Liste neue Punkte mitsvg.createSVGPoint()zu erzeugen. DOMPointstattSVGPoint: Nach SVG 2 sind die EinträgeDOMPoint-Objekte. Ältere Chromium-Versionen akzeptieren inappendItem()nur echteSVGPoint-Objekte.createSVGPoint()funktioniert überall.- Die Liste ist nicht iterierbar wie ein Array, zumindest nicht in allen Browsern. Für eine portable Schleife nutzt man
numberOfItemsbzw.lengthzusammen mitgetItem(i). - Ungültige Attributwerte (etwa eine ungerade Anzahl von Koordinaten) führen zu einer gekürzten Liste bis zum Fehler. Es wird keine Ausnahme geworfen.
pointsliefert den Basiswert. Laufende SMIL-Animationen sieht man nur inanimatedPoints.- Die Eigenschaft wird in allen modernen Browsern unterstützt. Dasselbe Verhalten gibt es bei
SVGPolylineElement.points.