SVGNumberList.numberOfItems — Eigenschaft · JavaScript-Referenz

Signatur

SVGNumberList.numberOfItems

Beschreibung

Die Eigenschaft numberOfItems gibt an, wie viele Einträge eine SVGNumberList gerade enthält. Solche Listen begegnen dir vor allem über SVGAnimatedNumberList, etwa bei SVGTextElement.rotate (Attribut rotate), bei SVGFEColorMatrixElement.values oder bei SVGFEConvolveMatrixElement.kernelMatrix. Die eigentliche Liste erreichst du über baseVal (Grundwert) bzw. animVal (animierter, schreibgeschützter Wert).

Typischer Einsatzzweck ist das Durchlaufen der Liste mit getItem(index): Die gültigen Indizes reichen von 0 bis numberOfItems - 1. Außerdem eignet sich die Eigenschaft zur Validierung, etwa um zu prüfen, ob eine Farbmatrix wirklich 20 Werte enthält.

Die Liste ist live: Änderst du das zugehörige Attribut per setAttribute() oder die Liste über appendItem(), removeItem(), clear() usw., spiegelt numberOfItems den neuen Stand sofort wider. Seit SVG 2 gibt es zusätzlich die gleichwertige Eigenschaft length.

Rückgabewert

Typ

number

Beschreibung

Nicht-negative Ganzzahl (unsigned long) mit der aktuellen Anzahl der SVGNumber-Einträge in der Liste. 0, wenn die Liste leer ist oder das Attribut fehlt.

Beispiele

Anzahl der Rotationswerte eines Textes ermitteln

const svgNS = 'http://www.w3.org/2000/svg';
const text = document.createElementNS(svgNS, 'text');
text.textContent = 'Hallo';
text.setAttribute('rotate', '0 15 30 45');

const liste = text.rotate.baseVal;
console.log(liste.numberOfItems);

// Liste ist live: Attribut ändern
text.setAttribute('rotate', '10 20');
console.log(liste.numberOfItems);

4 2

Alle Werte mit getItem() auslesen

const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('rotate', '5 10 15');

const liste = text.rotate.baseVal;
const werte = [];
for (let i = 0; i < liste.numberOfItems; i++) {
  werte.push(liste.getItem(i).value);
}
console.log(werte);

[5, 10, 15]

Farbmatrix eines Filters validieren

const svgNS = 'http://www.w3.org/2000/svg';
const matrix = document.createElementNS(svgNS, 'feColorMatrix');
matrix.setAttribute('type', 'matrix');
matrix.setAttribute('values', '1 0 0 0 0  0 1 0 0 0  0 0 1 0 0');

const anzahl = matrix.values.baseVal.numberOfItems;
if (matrix.getAttribute('type') === 'matrix' && anzahl !== 20) {
  console.warn(`Ungültige Farbmatrix: ${anzahl} statt 20 Werte`);
}

Ungültige Farbmatrix: 15 statt 20 Werte

Liste per Script erweitern und leeren

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
svg.append(text);

const liste = text.rotate.baseVal;
const zahl = svg.createSVGNumber();
zahl.value = 90;
liste.appendItem(zahl);
console.log(liste.numberOfItems, text.getAttribute('rotate'));

liste.clear();
console.log(liste.numberOfItems);

1 "90" 0

// Wichtig · Fallstricke

Nur lesbar: Eine Zuweisung an numberOfItems wird ignoriert (im Strict Mode TypeError). Zum Ändern der Länge appendItem(), removeItem(), clear() oder initialize() verwenden.
Live-Liste: Wenn du in einer Schleife Einträge entfernst, ändert sich numberOfItems sofort. Lies den Wert daher bei jedem Durchlauf neu oder lauf rückwärts, statt ihn vorher zwischenzuspeichern.
Zugriff außerhalb des Bereichs: getItem(i) mit i >= numberOfItems wirft eine IndexSizeError-DOMException.
animVal: Die Liste unter animVal ist schreibgeschützt; Änderungsmethoden werfen dort NoModificationAllowedError. Ohne laufende Animation entspricht ihr numberOfItems dem von baseVal.
Kompatibilität: numberOfItems wird von allen aktuellen Browsern unterstützt. Die SVG-2-Alternative length und der Zugriff per Index (liste[0]) sind in modernen Browsern ebenfalls vorhanden. Für ältere Umgebungen bleiben numberOfItems und getItem() die sicherste Wahl.

Siehe auch

SVGNumberList SVGNumberList.length SVGNumberList.getItem() SVGNumberList.appendItem() SVGNumberList.clear() SVGAnimatedNumberList SVGNumber