SVGNumberList.getItem() — Methode · JavaScript-Referenz

Signatur

SVGNumberList.prototype.getItem(index)

Beschreibung

Die Methode getItem() liest ein einzelnes Element aus einer SVGNumberList. Solche Listen begegnen dir bei SVG-Attributen, die eine Folge von Zahlen enthalten, zum Beispiel rotate auf <text>/<tspan> (text.rotate.baseVal), values auf <feColorMatrix> oder kernelMatrix auf <feConvolveMatrix>.

Du erhältst ein SVGNumber-Objekt, dessen Eigenschaft value die eigentliche Zahl enthält. Das Objekt ist eine Live-Referenz auf den Listeneintrag: Änderst du value in der baseVal-Liste, wird das zugehörige Attribut im DOM sofort angepasst. So kannst du einzelne Werte gezielt verändern, ohne den ganzen Attribut-String neu zu parsen und zusammenzusetzen.

Gültige Indizes laufen von 0 bis numberOfItems - 1. Liegt der Index außerhalb dieses Bereichs, wirft die Methode eine DOMException vom Typ IndexSizeError. In modernen Browsern kannst du alternativ auch per Array-Index (list[0]) zugreifen und length statt numberOfItems verwenden.

Parameter

Name	Typ	Default	Beschreibung
$index Pflicht	number		Nullbasierter Index des gewünschten Elements. Muss kleiner als `numberOfItems` sein. Wird in einen vorzeichenlosen 32-Bit-Integer umgewandelt.

Rückgabewert

Typ

SVGNumber

Beschreibung

Das SVGNumber-Objekt an der angegebenen Position. Die Zahl steht in .value. Es ist eine Live-Referenz auf den Listeneintrag, keine Kopie.

Beispiele

Rotationswerte eines Textes auslesen

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

const list = text.rotate.baseVal; // SVGNumberList
for (let i = 0; i < list.numberOfItems; i++) {
  console.log(`Buchstabe ${i}: ${list.getItem(i).value}°`);
}

Buchstabe 0: 10° Buchstabe 1: 20° Buchstabe 2: 30°

Einzelnen Wert über die Live-Referenz ändern

const text = document.querySelector('text'); // <text rotate="10 20 30">
const item = text.rotate.baseVal.getItem(1);
item.value = 45; // ändert direkt das DOM-Attribut

console.log(text.getAttribute('rotate'));

10 45 30

Farbmatrix eines Filters auswerten

const matrix = document.querySelector('feColorMatrix'); // type="matrix"
const values = matrix.values.baseVal;

// Diagonale der 4x5-Matrix (R, G, B, A-Faktoren)
const diag = [0, 6, 12, 18].map((i) => values.getItem(i).value);
console.log('Diagonale:', diag);

Diagonale: [1, 1, 1, 1]

Ungültigen Index abfangen

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

try {
  list.getItem(list.numberOfItems); // eins zu weit
} catch (err) {
  console.log(err.name);
}

IndexSizeError

// Wichtig · Fallstricke

Bereichsprüfung: Ist index >= numberOfItems, wirft die Methode einen IndexSizeError. Negative Zahlen werden zu großen vorzeichenlosen Werten umgerechnet und führen deshalb ebenfalls zum Fehler. Einen Rückgabewert undefined gibt es hier nicht, anders als bei list[i].
baseVal oder animVal: Die Liste in animVal ist schreibgeschützt. Wenn du value an einem Element daraus setzt, wird ein NoModificationAllowedError geworfen. Für Änderungen immer baseVal verwenden.
Referenz statt Kopie: Wenn du das zurückgegebene SVGNumber speicherst und später änderst, veränderst du das Attribut. Brauchst du nur den Wert, speichere .value.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Der Zugriff per Index (list[i]) und length ist neuer (SVG 2) und fehlt in sehr alten Browsern; getItem() funktioniert dagegen überall.

Siehe auch

SVGNumberList SVGNumber SVGNumberList.replaceItem() SVGNumberList.appendItem() SVGNumberList.numberOfItems SVGAnimatedNumberList SVGLengthList.getItem()