SVGPointList.length — Eigenschaft · JavaScript-Referenz

Signatur

get SVGPointList.length

Beschreibung

Die Eigenschaft SVGPointList.length gibt an, wie viele Punkte eine SVGPointList gerade enthält. Solche Listen bekommt man vor allem über points bzw. animatedPoints von <polyline>- und <polygon>-Elementen (Schnittstellen SVGPolylineElement und SVGPolygonElement).

Der Wert ist identisch mit numberOfItems. length kam später dazu, damit sich SVG-Listen wie andere array-ähnliche DOM-Sammlungen verhalten. Zusammen mit dem Index-Zugriff (list[i]) oder getItem(i) kann man damit alle Punkte in einer klassischen for-Schleife durchlaufen.

Die Liste ist live: Ändert man das Attribut points oder ruft man appendItem(), removeItem(), clear() usw. auf, passt sich length sofort an. Man verwendet die Eigenschaft zum Beispiel, um Polygone zu prüfen (mindestens drei Punkte?), um Punkte zu zählen oder um beim Bearbeiten von Formen den letzten Punkt zu finden.

Rückgabewert

Typ

number

Beschreibung

Eine nicht negative Ganzzahl (unsigned long) mit der aktuellen Anzahl der Punkte in der Liste.

Beispiele

Punkte eines Polygons zählen

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
polygon.setAttribute('points', '0,0 100,0 100,100 0,100');
svg.append(polygon);
document.body.append(svg);

console.log(polygon.points.length);
console.log(polygon.points.length === polygon.points.numberOfItems);

4 true

Live-Verhalten nach Änderungen

const line = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
line.setAttribute('points', '10,10 50,50');
const list = line.points;
console.log(list.length); // 2

// Neuen Punkt anhängen
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const p = svg.createSVGPoint();
p.x = 90; p.y = 10;
list.appendItem(p);
console.log(list.length); // 3

// Attribut direkt ändern – die Liste folgt
line.setAttribute('points', '0,0');
console.log(list.length); // 1

2 3 1

Alle Punkte durchlaufen und Umfang berechnen

const perimeter = (polygon) => {
  const pts = polygon.points;
  const n = pts.length;
  if (n < 2) return 0;
  let sum = 0;
  for (let i = 0; i < n; i++) {
    const a = pts.getItem(i);
    const b = pts.getItem((i + 1) % n); // geschlossen: letzter -> erster
    sum += Math.hypot(b.x - a.x, b.y - a.y);
  }
  return sum;
};

const poly = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
poly.setAttribute('points', '0,0 30,0 30,40');
console.log(perimeter(poly));

120

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie list.length = 0 bewirkt nichts; im Strict Mode wird ein TypeError ausgelöst. Zum Leeren nimmt man clear(), zum Kürzen removeItem().
Kompatibilität: numberOfItems funktioniert überall. length und der Index-Zugriff (list[i]) sind in Chromium-Browsern erst seit Version 116 verfügbar. Wer ältere Browser unterstützen muss, sollte besser numberOfItems und getItem() verwenden.
Live-Liste: Wer beim Durchlaufen Punkte entfernt, muss length in jeder Runde neu auswerten oder rückwärts zählen, sonst werden Punkte übersprungen.
Ist das Attribut points ungültig, wertet der Browser es nur bis zum ersten Fehler aus. length kann dann kleiner sein als erwartet.
SVGPointList ist kein Array: map, filter usw. gibt es nicht direkt. Man kann aber Array.from(list) verwenden, wo die Liste iterierbar ist.

Siehe auch

SVGPointList SVGPointList.numberOfItems SVGPointList.prototype.getItem() SVGPointList.prototype.appendItem() SVGPolygonElement SVGPolylineElement MediaList.length