SVGPointList.numberOfItems — Eigenschaft · JavaScript-Referenz

Signatur

SVGPointList.numberOfItems

Beschreibung

Die schreibgeschützte Eigenschaft numberOfItems gibt an, wie viele Punkte (DOMPoint- bzw. SVGPoint-Objekte) eine SVGPointList enthält. Solche Listen erhältst du vor allem über die Eigenschaften points und animatedPoints von SVGPolygonElement und SVGPolylineElement.

Du brauchst sie immer dann, wenn du über die Punkte einer Form iterieren willst, zum Beispiel mit getItem(index) in einer klassischen for-Schleife, oder wenn du prüfen willst, ob eine Form überhaupt genug Punkte hat (ein Polygon braucht mindestens drei).

Die Liste ist live: Änderst du das Attribut points oder rufst du appendItem(), removeItem(), insertItemBefore() oder clear() auf, ändert sich der Wert von numberOfItems sofort mit. Neuere Browser bieten zusätzlich die gleichbedeutende Eigenschaft length.

Beispiele

Punkte eines Polygons zählen

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

console.log(polygon.points.numberOfItems);

4

Über alle Punkte iterieren

const svgNS = 'http://www.w3.org/2000/svg';
const polyline = document.createElementNS(svgNS, 'polyline');
polyline.setAttribute('points', '10,20 30,40 50,10');

const { points } = polyline;
for (let i = 0; i < points.numberOfItems; i++) {
  const p = points.getItem(i);
  console.log(`Punkt ${i}: x=${p.x}, y=${p.y}`);
}

Punkt 0: x=10, y=20 Punkt 1: x=30, y=40 Punkt 2: x=50, y=10

Live-Verhalten beim Hinzufügen und Entfernen

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

const list = polygon.points;
console.log(list.numberOfItems); // 2

// Neuen Punkt anhängen
const pt = svg.createSVGPoint();
pt.x = 25;
pt.y = 40;
list.appendItem(pt);
console.log(list.numberOfItems); // 3

list.removeItem(0);
console.log(list.numberOfItems); // 2

// Gültig als Polygon?
console.log(list.numberOfItems >= 3 ? 'gültig' : 'zu wenige Punkte');

2 3 2 zu wenige Punkte

// Wichtig · Fallstricke

Schreibgeschützt: Zuweisungen wie list.numberOfItems = 0 werden stillschweigend ignoriert (im Strict Mode gibt es einen TypeError). Zum Leeren verwendest du clear().
Kein echtes Array: Eine SVGPointList hat kein forEach und kein map. Nutze numberOfItems mit getItem(). In modernen Browsern gehen auch length, Indexzugriff (list[0]) und for...of, in älteren nicht immer.
Syntaxfehler im Attribut: Ist points fehlerhaft, werden die Punkte meist nur bis zur Fehlerstelle übernommen. numberOfItems kann dann kleiner sein als erwartet.
Performance: Wenn du die Liste in der Schleife veränderst, änderst du auch numberOfItems. Für stabile Schleifen den Wert vorher in einer Variablen speichern oder rückwärts iterieren.
Kompatibilität: numberOfItems wird von allen gängigen Browsern unterstützt. Für getItem()-Rückgaben liefern neuere Browser DOMPoint statt SVGPoint.

Siehe auch

SVGPointList SVGPointList.length SVGPointList.getItem() SVGPointList.appendItem() SVGPointList.removeItem() SVGPointList.clear() SVGPolygonElement SVGPolylineElement