SVGAnimatedLengthList.animVal — Eigenschaft · JavaScript-Referenz

Signatur

SVGAnimatedLengthList.animVal

Beschreibung

Die Eigenschaft animVal der Schnittstelle SVGAnimatedLengthList gibt eine SVGLengthList zurück. Diese Liste enthält den aktuellen, gegebenenfalls animierten Wert eines SVG-Attributs, das eine Liste von Längen (<length>, <percentage> oder <number>) akzeptiert. Typische Beispiele sind die Attribute x, y, dx und dy von <text>- und <tspan>-Elementen, mit denen einzelne Zeichen positioniert werden.

Im Unterschied zu baseVal, das den im Markup bzw. per Skript gesetzten Grundwert enthält, spiegelt animVal den Wert wider, der sich durch eine laufende SMIL-Animation (z. B. <animate>) ergibt. Läuft keine Animation, sind animVal und baseVal inhaltlich identisch.

Sowohl die Eigenschaft selbst als auch die zurückgegebene Liste sind schreibgeschützt: Du kannst die Einträge nur lesen (über numberOfItems, length und getItem()), aber nicht verändern. Änderungen nimmst du immer über baseVal vor.

Nützlich ist animVal vor allem, wenn du in einem Skript den tatsächlich dargestellten Zustand einer animierten Textposition abfragen möchtest, etwa um andere Elemente daran auszurichten oder für Debugging-Zwecke.

Rückgabewert

Typ

SVGLengthList

Beschreibung

Eine schreibgeschützte SVGLengthList mit SVGLength-Objekten, die den aktuellen (animierten) Wert des Attributs darstellen.

Beispiele

Zeichenpositionen 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('x', '10 25 40');
text.setAttribute('y', '50');
text.textContent = 'ABC';
svg.append(text);
document.body.append(svg);

const list = text.x.animVal;
console.log(list.numberOfItems);
for (let i = 0; i < list.numberOfItems; i++) {
  console.log(`Zeichen ${i}: x = ${list.getItem(i).value}`);
}

3 Zeichen 0: x = 10 Zeichen 1: x = 25 Zeichen 2: x = 40

animVal und baseVal während einer SMIL-Animation vergleichen

// HTML:
// <svg width="300" height="100">
//   <text id="label" x="10" y="50">Hallo
//     <animate attributeName="x" from="10" to="200" dur="4s" repeatCount="indefinite" />
//   </text>
// </svg>

const label = document.getElementById('label');

setInterval(() => {
  const basis = label.x.baseVal.getItem(0).value;
  const animiert = label.x.animVal.numberOfItems
    ? label.x.animVal.getItem(0).value
    : basis;
  console.log(`baseVal: ${basis}, animVal: ${animiert.toFixed(1)}`);
}, 1000);

baseVal: 10, animVal: 57.5 baseVal: 10, animVal: 105.0 … (animVal ändert sich, baseVal bleibt 10)

Schreibversuch auf animVal abfangen

const text = document.querySelector('text');

try {
  text.x.animVal.clear();
} catch (err) {
  console.log(err.name);
}

// Richtig: Änderungen immer über baseVal
text.x.baseVal.getItem(0).value = 30;
console.log(text.getAttribute('x'));

NoModificationAllowedError 30

// Wichtig · Fallstricke

Schreibschutz: Methoden wie clear(), appendItem() oder das Setzen von SVGLength.value auf Einträgen von animVal werfen eine DOMException vom Typ NoModificationAllowedError. Nutze stattdessen baseVal.
Browser-Unterschiede: Nicht alle Engines aktualisieren animVal zuverlässig während SMIL-Animationen – in manchen Browsern liefert animVal denselben Wert wie baseVal. Für robuste Messungen der tatsächlichen Position kann getStartPositionOfChar() oder getBBox() sinnvoller sein.
CSS-Animationen: animVal berücksichtigt nur SMIL-Animationen, keine CSS-Transitions oder Web-Animations-API-Effekte auf Transformationen.
Leere Liste: Ist das Attribut nicht gesetzt, ist numberOfItems gleich 0; ein Aufruf von getItem(0) wirft dann einen IndexSizeError.
Die Liste ist „live“: Eine einmal gespeicherte Referenz spiegelt spätere Änderungen wider.

Siehe auch

SVGAnimatedLengthList.baseVal SVGAnimatedLengthList SVGLengthList SVGLength SVGTextPositioningElement SVGAnimatedTransformList.animVal Property