SVGLengthList.length — Eigenschaft · JavaScript-Referenz

Signatur

get SVGLengthList.length

Beschreibung

Die schreibgeschützte Eigenschaft length der Schnittstelle SVGLengthList liefert die Anzahl der Längenwerte, die aktuell in der Liste stehen. Solche Listen entstehen z. B. bei den Attributen x, y, dx und dy von <text>- und <tspan>-Elementen. Dort kann jedes Zeichen eine eigene Position bekommen.

length ist ein Alias für SVGLengthList.numberOfItems und gibt denselben Wert zurück. Die Eigenschaft wurde in SVG 2 ergänzt, damit sich SVG-Listen ähnlich wie Arrays verwenden lassen. Zusammen mit dem Indexzugriff (list[i]) oder getItem(i) kannst du damit in einer klassischen for-Schleife über alle Einträge laufen.

Der Wert ist live: Nach appendItem(), insertItemBefore(), removeItem(), clear() oder initialize() und nach einer Änderung des zugrunde liegenden Attributs per setAttribute() zeigt length sofort die neue Anzahl an.

Rückgabewert

Typ

number

Beschreibung

Eine nicht-negative Ganzzahl (unsigned long) mit der Anzahl der Einträge in der Liste.

Beispiele

Anzahl der x-Koordinaten eines Textes ermitteln

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

// baseVal ist eine SVGLengthList
const xList = text.x.baseVal;
console.log(xList.length);
console.log(xList.length === xList.numberOfItems);

4 true

Über alle Einträge iterieren

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

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

[10, 20, 30, 40]

Live-Aktualisierung nach Änderungen

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

const neu = svg.createSVGLength();
neu.value = 50;
xList.appendItem(neu);
console.log(xList.length); // 5

xList.removeItem(0);
console.log(xList.length); // 4

xList.clear();
console.log(xList.length); // 0

5 4 0

// Wichtig · Fallstricke

Schreibgeschützt: Anders als bei Array.prototype.length kannst du die Liste nicht kürzen, indem du length einen Wert zuweist. Im nicht-strikten Modus wird die Zuweisung stillschweigend ignoriert, im strikten Modus wirft sie einen TypeError. Zum Leeren gibt es clear().
Kein echtes Array: Methoden wie map() oder forEach() gibt es nicht. Nutze eine for-Schleife. In aktuellen Browsern geht auch Array.from(list), weil die Liste iterierbar ist.
baseVal vs. animVal: baseVal enthält die Attributwerte und kann verändert werden. animVal ist schreibgeschützt und kann bei SMIL-Animationen einen anderen Wert für length liefern.
Kompatibilität: length kam erst mit SVG 2. Sehr alte Browser (z. B. alter Internet Explorer) kennen nur numberOfItems. Für maximale Kompatibilität ist numberOfItems die sichere Wahl.

Siehe auch

SVGLengthList SVGLengthList.numberOfItems SVGLengthList.getItem() SVGLengthList.appendItem() SVGLength SVGAnimatedLengthList ImageTrackList.length