SVGPointList — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGPointList

Beschreibung

SVGPointList ist die DOM-Darstellung des Attributs points der Elemente <polyline> und <polygon>. Über SVGPolylineElement.points bzw. SVGPolygonElement.points bekommst du eine lebende Liste. Änderungen an der Liste oder an ihren Punkten schreiben sich sofort in das Attribut zurück und verändern die Darstellung. Die Eigenschaft animatedPoints liefert dagegen eine schreibgeschützte Liste mit dem aktuell animierten Zustand.

Die Schnittstelle arbeitet mit einem eigenen, listenartigen API statt mit Array-Methoden:

Eigenschaften: length und numberOfItems – beide geben die Anzahl der Punkte an.
Methoden: clear(), initialize(newItem), getItem(index), insertItemBefore(newItem, index), replaceItem(newItem, index), removeItem(index) und appendItem(newItem).
In modernen Browsern kannst du auch per Index zugreifen (list[0]).

Du nutzt SVGPointList, wenn du Linienzüge oder Polygone dynamisch aufbauen willst, z. B. für Live-Diagramme, Zeichenwerkzeuge oder Sparklines. Dann musst du den points-String nicht jedes Mal neu zusammensetzen und parsen. Einen eigenen Konstruktor gibt es nicht. Neue Punkte erzeugst du mit svgElement.createSVGPoint() oder in neueren Browsern mit new DOMPoint(x, y).

Rückgabewert

Typ

SVGPointList

Beschreibung

Wird von SVGPolylineElement.points, SVGPolygonElement.points (lebende, veränderbare Liste) und animatedPoints (schreibgeschützt) geliefert.

Beispiele

Punkte einer Polylinie auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
const line = document.createElementNS(svgNS, 'polyline');
line.setAttribute('points', '0,0 50,20 100,10');
svg.append(line);
document.body.append(svg);

const points = line.points; // SVGPointList
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}`);
}

3 Punkt 0: 0/0 Punkt 1: 50/20 Punkt 2: 100/10

Live-Sparkline: Punkte anhängen und alte entfernen

const svg = document.querySelector('svg');
const line = svg.querySelector('polyline');
const MAX = 20;
let x = 0;

const addValue = (value) => {
  const p = svg.createSVGPoint(); // funktioniert in allen Browsern
  p.x = x;
  p.y = 100 - value;
  x += 5;
  line.points.appendItem(p);
  if (line.points.numberOfItems > MAX) {
    line.points.removeItem(0); // ältesten Punkt verwerfen
  }
};

setInterval(() => addValue(Math.random() * 100), 500);

Punkt ersetzen, einfügen und Liste zurücksetzen

const polygon = document.querySelector('polygon');
const list = polygon.points;

const a = new DOMPoint(10, 10);
list.initialize(a); // leert die Liste, a ist danach der einzige Punkt
list.appendItem(new DOMPoint(90, 10));
list.insertItemBefore(new DOMPoint(50, 90), 1);
list.replaceItem(new DOMPoint(10, 20), 0);

console.log(polygon.getAttribute('points'));
list.clear();
console.log(list.length);

10,20 50,90 90,10 0

// Wichtig · Fallstricke

Lebende Liste: Die Punkte werden per Referenz zurückgegeben. list.getItem(0).x = 5 ändert das Element sofort. Brauchst du eine unabhängige Kopie, schreibst du z. B. Array.from(list, p => ({ x: p.x, y: p.y })).
Einträge werden kopiert: Nach SVG 2 werden Punkte beim Einfügen kopiert, wenn sie schon zu einer anderen Liste gehören. In älteren Implementierungen (SVG 1.1) wurden sie dabei aus der ursprünglichen Liste entfernt.
Fehler: getItem, replaceItem und removeItem werfen einen IndexSizeError, wenn der Index außerhalb der Liste liegt. Bei insertItemBefore wird ein zu großer Index dagegen als „anhängen“ behandelt. Schreibzugriffe auf animatedPoints werfen einen NoModificationAllowedError.
Kompatibilität: Die Schnittstelle an sich wird überall unterstützt. length und der Zugriff per Index (list[i]) sind neuer (SVG 2). Ob Browser DOMPoint statt SVGPoint als Eintrag annehmen, ist uneinheitlich. Am sichersten ist svgElement.createSVGPoint().
Keine Array-Methoden: map, forEach usw. gibt es nicht direkt. Wandle die Liste mit Array.from() um oder benutze eine Zählschleife.
Leistung: Wenn du sehr viele Punkte auf einmal änderst, ist es meist schneller, das Attribut points einmal als String zu setzen, als tausende einzelne appendItem-Aufrufe zu machen.

Siehe auch

SVGPolylineElement SVGPolygonElement DOMPoint SVGSVGElement.createSVGPoint() SVGNumberList SVGLengthList SVGTransformList