SVGNumberList.length — Eigenschaft · JavaScript-Referenz

Signatur

get SVGNumberList.length

Beschreibung

Die Eigenschaft SVGNumberList.length liefert die Anzahl der SVGNumber-Objekte, die aktuell in der Liste enthalten sind. Sie ist ein Alias für SVGNumberList.numberOfItems und wurde mit SVG 2 ergänzt, damit sich SVG-Listen ähnlich wie Arrays verwenden lassen.

Eine SVGNumberList begegnet einem vor allem bei Attributen, die Zahlenlisten enthalten, zum Beispiel rotate an <text> und <tspan> (über element.rotate.baseVal) oder tableValues an Filter-Transferfunktionen wie <feFuncR>. Mit length lässt sich prüfen, wie viele Werte gesetzt sind, oder die Liste per for-Schleife zusammen mit getItem(index) durchlaufen.

Der Wert ist live: Ändern sich die Einträge über appendItem(), removeItem(), clear() oder über das zugrunde liegende Attribut, ändert sich length sofort mit. Die Eigenschaft selbst kann nicht beschrieben werden – ein Kürzen wie bei Array.prototype.length ist nicht möglich.

Beispiele

Anzahl der Rotationswerte eines Textes ermitteln

// <svg><text id="label" x="10" y="30" rotate="0 15 30 45">Hallo</text></svg>
const text = document.getElementById('label');
const rotations = text.rotate.baseVal; // SVGNumberList

console.log(rotations.length);
console.log(rotations.length === rotations.numberOfItems);

4 true

Liste durchlaufen und Werte auslesen

const text = document.querySelector('text[rotate]');
const list = text.rotate.baseVal;

const values = [];
for (let i = 0; i < list.length; i++) {
  values.push(list.getItem(i).value);
}
console.log(values);

[0, 15, 30, 45]

length ist live – Einträge hinzufügen und entfernen

const svg = document.querySelector('svg');
const text = document.querySelector('#label');
const list = text.rotate.baseVal;

const num = svg.createSVGNumber();
num.value = 90;
list.appendItem(num);
console.log(list.length); // ein Eintrag mehr

list.clear();
console.log(list.length);
console.log(text.getAttribute('rotate'));

5 0 ""

Werte einer Filter-Transferfunktion prüfen

// <feFuncR id="fr" type="table" tableValues="0 0.5 1"/>
const funcR = document.getElementById('fr');
const table = funcR.tableValues.baseVal;

if (table.length < 2) {
  console.warn('tableValues braucht mindestens zwei Werte');
} else {
  console.log(`${table.length} Stützwerte definiert`);
}

3 Stützwerte definiert

// Wichtig · Fallstricke

Nur lesbar: Wenn man list.length = 0 zuweist, wird die Liste nicht geleert (im Strict Mode gibt es einen TypeError). Zum Leeren dient clear().
baseVal vs. animVal: animVal ist schreibgeschützt und kann während einer SMIL-Animation eine andere Länge haben als baseVal.
Keine echte Array-Schnittstelle: SVGNumberList hat zwar length und in modernen Browsern Indexzugriff (list[0]), aber kein map oder forEach. Wer Array-Methoden braucht, nutzt Array.from(list); das setzt allerdings Iterator-Unterstützung voraus. Am sichersten ist getItem(i).
Kompatibilität: length kam erst mit SVG 2. Sehr alte Browser (z. B. der Internet Explorer) kennen nur numberOfItems. Als Rückfallebene eignet sich list.length ?? list.numberOfItems.

Siehe auch

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