SVGAnimatedLengthList — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGAnimatedLengthList

Beschreibung

Die Schnittstelle SVGAnimatedLengthList wird für SVG-Attribute verwendet, die eine Liste von Längenangaben enthalten und über SMIL (<animate>) animiert werden können. Typisch sind die Attribute x, y, dx und dy der Elemente <text> und <tspan>. Dort kann man jedem einzelnen Zeichen eine eigene Position zuweisen, etwa x="10 20 30".

Die Schnittstelle hat zwei schreibgeschützte Eigenschaften, die jeweils ein SVGLengthList-Objekt liefern:

baseVal: der Basiswert des Attributs, also der Wert, der im Markup steht bzw. per Skript gesetzt wurde. Diese Liste kannst du ändern, zum Beispiel mit appendItem(), replaceItem() oder clear(). Jede Änderung wird sofort in das Attribut zurückgeschrieben.
animVal: der aktuelle animierte Wert. Er ist nur lesbar. Läuft keine Animation, enthält er dieselben Werte wie baseVal.

Die Schnittstelle bietet sich an, wenn du Zeichenpositionen typsicher lesen oder ändern willst, ohne Attribut-Strings selbst zu zerlegen. Für einfache Fälle reicht meist setAttribute(). Die Listen-API hat dagegen den Vorteil, dass sie Einheiten (SVGLength.unitType) und Umrechnungen (convertToSpecifiedUnits()) direkt mitbringt.

Rückgabewert

Typ

SVGAnimatedLengthList

Beschreibung

Wird nicht per Konstruktor erzeugt, sondern von Eigenschaften wie SVGTextPositioningElement.x, .y, .dx und .dy zurückgegeben. Enthält baseVal und animVal, beide vom Typ SVGLengthList.

Beispiele

Instanz abrufen und Basiswerte auslesen

document.body.insertAdjacentHTML('beforeend', `
  <svg width="200" height="50">
    <text id="label" x="10 25 40" y="30">ABC</text>
  </svg>`);

const text = document.getElementById('label');
const xList = text.x; // SVGAnimatedLengthList

console.log(xList instanceof SVGAnimatedLengthList);
console.log(xList.baseVal.numberOfItems);
const werte = Array.from({ length: xList.baseVal.numberOfItems },
  (_, i) => xList.baseVal.getItem(i).value);
console.log(werte);

true 3 [10, 25, 40]

Zeichenpositionen per baseVal verändern

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

liste.clear();
// Jedes Zeichen 20 Einheiten weiter rechts platzieren
[...text.textContent].forEach((_, i) => {
  const len = svg.createSVGLength();
  len.value = 10 + i * 20;
  liste.appendItem(len);
});

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

10 30 50

animVal während einer SMIL-Animation lesen

document.body.insertAdjacentHTML('beforeend', `
  <svg width="300" height="50">
    <text id="wander" x="10" y="30">Hallo
      <animate attributeName="x" from="10" to="200" dur="2s" fill="freeze" />
    </text>
  </svg>`);

const t = document.getElementById('wander');
setTimeout(() => {
  console.log('Basis:', t.x.baseVal.getItem(0).value);
  console.log('Animiert:', t.x.animVal.getItem(0).value);
}, 1000);

Basis: 10 Animiert: ~105 (browserabhängig)

// Wichtig · Fallstricke

animVal ist nur lesbar: Wer versucht, animVal zu ändern, löst eine NoModificationAllowedError-DOMException aus. Änderungen gehören immer an baseVal.
Getrennte Objekte: baseVal und animVal sind verschiedene Objekte. Manche Browser liefern für animVal während einer Animation keine zuverlässigen Zwischenwerte, sondern einfach denselben Wert wie baseVal.
Live-Listen: SVGLengthList ist „live“. Wird ein SVGLength eingefügt, das schon zu einer anderen Liste gehört, wird es kopiert und nicht verschoben. Neue Längen legst du mit SVGSVGElement.createSVGLength() an.
Keine Array-Methoden: Die Liste ist kein Array. Nutze getItem() und numberOfItems. Moderne Browser erlauben zusätzlich Index-Zugriff und length, sehr alte Engines dagegen nicht.
Kompatibilität: Die Schnittstelle wird von allen aktuellen Browsern unterstützt. SMIL-Animationen funktionieren in Chromium, Firefox und Safari. Der alte Internet Explorer unterstützt SMIL nicht, dort bleibt animVal immer gleich baseVal.

Siehe auch

SVGLengthList SVGLength SVGAnimatedLength SVGTextPositioningElement SVGSVGElement.createSVGLength() SVGAnimatedNumberList