SVGLengthList.getItem() — Methode · JavaScript-Referenz

Signatur

SVGLengthList.prototype.getItem(index)

Beschreibung

getItem() liest einen einzelnen Eintrag aus einer SVGLengthList. Solche Listen gibt es bei SVG-Attributen, die mehrere Längenwerte aufnehmen können. Das sind vor allem x, y, dx und dy von <text> und <tspan>. Erreichbar ist die Liste zum Beispiel über textElement.x.baseVal.

Zurück kommt ein SVGLength-Objekt, das direkt mit dem Attribut verknüpft ist. Wenn du an diesem Objekt value, valueInSpecifiedUnits oder valueAsString änderst, aktualisiert der Browser sofort das zugehörige Attribut im DOM. Deshalb eignet sich getItem() gut, um einzelne Glyphen-Positionen gezielt zu lesen oder zu animieren.

Gezählt wird ab 0. Wie viele Einträge die Liste hat, verraten numberOfItems und length. In modernen Browsern kannst du auch die eckige Schreibweise list[index] verwenden. Die Einträge in animVal spiegeln den animierten Wert wider und lassen sich nur lesen.

Parameter

Name	Typ	Default	Beschreibung
$index Pflicht	number		Position des gewünschten Eintrags, beginnend bei `0`. Der Wert muss kleiner als `numberOfItems` sein.

Rückgabewert

Typ

SVGLength

Beschreibung

Das SVGLength-Objekt an der angegebenen Position. Es ist eine Live-Referenz, also keine Kopie.

Beispiele

Einzelne x-Koordinaten eines Textes auslesen

// <svg><text id="t" x="10 30 50" y="40">ABC</text></svg>
const text = document.getElementById('t');
const xList = text.x.baseVal;

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

Glyphe 0: 10px Glyphe 1: 30px Glyphe 2: 50px

Position einer Glyphe live verändern

const text = document.getElementById('t');
const second = text.x.baseVal.getItem(1);

second.value = 80; // wirkt sofort auf das Attribut
console.log(text.getAttribute('x'));

10 80 50

Einheit eines Eintrags auswerten und sicher zugreifen

const getLength = (list, index) => {
  if (index < 0 || index >= list.numberOfItems) return null;
  return list.getItem(index);
};

const text = document.querySelector('text');
text.setAttribute('dx', '2em 5');
const first = getLength(text.dx.baseVal, 0);

console.log(first.unitType === SVGLength.SVG_LENGTHTYPE_EMS); // true
console.log(first.valueAsString);
console.log(getLength(text.dx.baseVal, 9));

true 2em null

// Wichtig · Fallstricke

Ist index größer oder gleich numberOfItems, wirft getItem() eine DOMException vom Typ IndexSizeError. Prüfe den Index deshalb vorher.
Einträge aus animVal lassen sich nicht verändern. Ein Schreibversuch führt zu einem NoModificationAllowedError.
Das zurückgegebene Objekt ist live. Wenn du Werte zwischenspeichern willst, kopiere value oder valueAsString, statt das Objekt aufzubewahren.
Einheiten wie % oder em lassen sich erst sinnvoll in Pixel umrechnen, wenn das Element im Dokument hängt.
Die Methode funktioniert in allen modernen Browsern. Die eckige Schreibweise list[i] gibt es erst in neueren Implementierungen (SVG 2).

Siehe auch

SVGLengthList SVGLength SVGLengthList.replaceItem() SVGLengthList.appendItem() SVGLengthList.numberOfItems SVGAnimatedLengthList TextTrackCueList.getCueById()