SVGLengthList.numberOfItems — Eigenschaft · JavaScript-Referenz

Signatur

SVGLengthList.numberOfItems

Beschreibung

Die Eigenschaft numberOfItems der Schnittstelle SVGLengthList gibt an, wie viele SVGLength-Objekte die Liste aktuell enthält. Solche Listen begegnen einem vor allem bei Attributen, die mehrere Längenwerte aufnehmen können – etwa x, y, dx und dy von <text>- und <tspan>-Elementen.

Man verwendet numberOfItems typischerweise als Schleifengrenze beim Durchlaufen der Liste mit getItem(index) oder um vor einem Zugriff zu prüfen, ob überhaupt Werte gesetzt sind. Die Eigenschaft ist identisch mit SVGLengthList.length; length wurde später ergänzt, damit sich SVG-Listen eher wie Arrays verhalten.

Der Wert ist live: Ändert man die Liste über appendItem(), removeItem(), clear() oder durch Setzen des zugehörigen Attributs, spiegelt numberOfItems sofort die neue Anzahl wider.

Rückgabewert

Typ

number

Beschreibung

Eine nicht-negative Ganzzahl (unsigned long) mit der Anzahl der Einträge in der Liste. Die Eigenschaft ist schreibgeschützt.

Beispiele

Anzahl der x-Positionen eines Textelements ermitteln

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('x', '10 20 30 40');
text.textContent = 'ABCD';
svg.append(text);
document.body.append(svg);

// baseVal ist die SVGLengthList des Attributs
const xList = text.x.baseVal;
console.log(xList.numberOfItems);

4

Liste mit getItem() durchlaufen

const text = document.querySelector('text');
const xList = text.x.baseVal;

for (let i = 0; i < xList.numberOfItems; i++) {
  const len = xList.getItem(i);
  console.log(`Buchstabe ${i}: x = ${len.value}`);
}

Buchstabe 0: x = 10 Buchstabe 1: x = 20 Buchstabe 2: x = 30 Buchstabe 3: x = 40

Live-Aktualisierung nach appendItem() und clear()

const svg = document.querySelector('svg');
const text = svg.querySelector('text');
const list = text.x.baseVal;

const neu = svg.createSVGLength();
neu.value = 50;
list.appendItem(neu);
console.log(list.numberOfItems); // 5
console.log(text.getAttribute('x'));

list.clear();
console.log(list.numberOfItems); // 0

5 10 20 30 40 50 0

// Wichtig · Fallstricke

numberOfItems ist schreibgeschützt – eine Zuweisung wird im Nicht-Strict-Modus stillschweigend ignoriert und wirft im Strict-Modus einen TypeError.
Die Liste ist kein Array: Methoden wie map() fehlen. In modernen Browsern ist sie jedoch iterierbar und per Index (list[0]) ansprechbar; für ältere Umgebungen bleibt getItem() mit numberOfItems der sichere Weg.
animVal ist eine eigene, schreibgeschützte Liste; ihr numberOfItems kann während einer SMIL-Animation von baseVal abweichen.
Ist das Attribut nicht gesetzt, liefert numberOfItems 0 – ein Zugriff mit getItem(0) wirft dann einen IndexSizeError.
Wird von allen gängigen Browsern seit Langem unterstützt; das Alias length ist neuer, aber ebenfalls breit verfügbar.

Siehe auch

SVGLengthList SVGLengthList.length SVGLengthList.getItem() SVGLengthList.appendItem() SVGLengthList.clear() SVGLength SVGAnimatedLengthList