SVGPolylineElement.points — Eigenschaft · JavaScript-Referenz

Signatur

SVGPolylineElement.points

Beschreibung

Die schreibgeschützte Eigenschaft points von SVGPolylineElement gibt eine SVGPointList zurück, die den Basiswert (also den nicht animierten Wert) des Attributs points repräsentiert. Jeder Eintrag ist ein DOMPoint (früher SVGPoint) mit den Koordinaten x und y im Benutzerkoordinatensystem.

„Schreibgeschützt“ bezieht sich nur auf die Referenz: Man kann polyline.points kein neues Objekt zuweisen, die Liste selbst ist aber live und veränderbar. Mit Methoden wie appendItem(), insertItemBefore(), replaceItem(), removeItem() und clear() lassen sich Punkte hinzufügen oder entfernen – das Attribut points im DOM wird dabei automatisch aktualisiert und umgekehrt.

Typische Einsatzfälle sind dynamisch gezeichnete Linienzüge, etwa Echtzeit-Diagramme (Sparklines), Freihandzeichnen per Maus oder das Auslesen und Transformieren vorhandener Koordinaten. Wer den animierten Wert (z. B. während einer SMIL-Animation) benötigt, verwendet stattdessen animatedPoints.

Rückgabewert

Typ

SVGPointList

Beschreibung

Live-Liste der Punkte des points-Attributs. Änderungen an der Liste wirken sich sofort auf das Element und dessen Attribut aus.

Beispiele

Punkte einer Polylinie auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
const polyline = document.createElementNS(svgNS, 'polyline');
polyline.setAttribute('points', '0,40 40,40 40,80 80,80');
svg.append(polyline);
document.body.append(svg);

const { points } = polyline;
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}`);
}

4 Punkt 0: 0/40 Punkt 1: 40/40 Punkt 2: 40/80 Punkt 3: 80/80

Punkt per appendItem hinzufügen (live Liste)

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

// Neuen Punkt erzeugen und anhängen
const pt = svg.createSVGPoint(); // alternativ: new DOMPoint(120, 20)
pt.x = 120;
pt.y = 20;
polyline.points.appendItem(pt);

// Das Attribut wurde automatisch aktualisiert
console.log(polyline.getAttribute('points'));

0,40 40,40 40,80 80,80 120,20

Echtzeit-Sparkline mit begrenzter Punktzahl

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
svg.setAttribute('width', '200');
svg.setAttribute('height', '50');
const line = document.createElementNS(svgNS, 'polyline');
line.setAttribute('fill', 'none');
line.setAttribute('stroke', 'teal');
svg.append(line);
document.body.append(svg);

const MAX = 20;
let t = 0;
setInterval(() => {
  const list = line.points;
  list.appendItem(new DOMPoint(0, 25 + Math.sin(t++ / 2) * 20));
  if (list.numberOfItems > MAX) list.removeItem(0);
  // x-Koordinaten neu verteilen
  for (let i = 0; i < list.numberOfItems; i++) {
    list.getItem(i).x = i * (200 / (MAX - 1));
  }
}, 200);

// Wichtig · Fallstricke

Keine Zuweisung: polyline.points = … wird ignoriert (im Strict Mode TypeError). Zum kompletten Ersetzen setAttribute('points', '…') oder points.clear() + appendItem() verwenden.
appendItem() und insertItemBefore() verschieben ein Punktobjekt, das bereits in einer anderen Liste steckt, statt es zu kopieren.
Neuere Browser akzeptieren DOMPoint-Objekte; SVGSVGElement.createSVGPoint() gilt als veraltet, funktioniert aber weiterhin überall.
Die Liste hat length und numberOfItems; Index-Zugriff per points[i] wird von modernen Browsern unterstützt, getItem(i) ist am kompatibelsten.
Bei vielen Punkten ist das einmalige Setzen des Attributs per String oft schneller als viele einzelne appendItem()-Aufrufe.
Browser-Kompatibilität: in allen aktuellen Browsern unterstützt.

Siehe auch

SVGPolylineElement SVGPolylineElement.animatedPoints SVGPointList SVGPolygonElement.points SVGSVGElement.createSVGPoint() SVGAElement.ping