SVGAnimatedNumber.animVal — Eigenschaft · JavaScript-Referenz

Signatur

SVGAnimatedNumber.animVal

Beschreibung

animVal gehört zur Schnittstelle SVGAnimatedNumber. Diese kapselt numerische SVG-Attribute wie offset eines <stop>-Elements, pathLength eines Geometrie-Elements oder k1–k4 von <feComposite>. Jedes dieser Attribute hat zwei Werte: den Basiswert (baseVal), der dem Attribut im Markup entspricht, und den animierten Wert (animVal), also den Wert, der im Moment tatsächlich gilt.

Läuft auf dem Attribut eine deklarative SMIL-Animation (<animate>, <set>), gibt animVal den aktuellen Zwischenwert der Animation zurück. Ohne aktive Animation stimmen animVal und baseVal überein.

Nutze animVal, wenn du den momentan sichtbaren Zustand auslesen willst, etwa zur Synchronisation mit JavaScript-Logik, zum Debugging von Animationen oder für Messungen. Willst du den Wert ändern, schreibst du immer in baseVal oder nutzt setAttribute(). animVal ist schreibgeschützt.

Rückgabewert

Typ

number

Beschreibung

Der aktuelle (animierte) Wert des Attributs als Gleitkommazahl. Prozentangaben wie offset="50%" werden dabei in Bruchwerte umgerechnet (0.5).

Beispiele

Offset eines Farbverlauf-Stopps auslesen

// <svg><linearGradient id="g"><stop id="s1" offset="50%" stop-color="red"/></linearGradient></svg>
const stop = document.getElementById('s1');

console.log(stop.offset.baseVal); // Wert aus dem Markup
console.log(stop.offset.animVal); // aktuell gültiger Wert

0.5 0.5

Laufende SMIL-Animation beobachten

// <stop id="s2" offset="0" stop-color="blue">
//   <animate attributeName="offset" from="0" to="1" dur="4s" repeatCount="indefinite"/>
// </stop>
const stop = document.getElementById('s2');

const log = () => {
  const { baseVal, animVal } = stop.offset;
  console.log(`Basis: ${baseVal}, animiert: ${animVal.toFixed(2)}`);
};

const timer = setInterval(log, 1000);
setTimeout(() => clearInterval(timer), 4000);

Basis: 0, animiert: 0.25 Basis: 0, animiert: 0.50 Basis: 0, animiert: 0.75 …

animVal ist schreibgeschützt – Änderung über baseVal

'use strict';
const path = document.querySelector('path');

try {
  path.pathLength.animVal = 100; // TypeError im Strict Mode
} catch (err) {
  console.log(err instanceof TypeError);
}

// Richtig: Basiswert setzen
path.pathLength.baseVal = 100;
console.log(path.getAttribute('pathLength'), path.pathLength.animVal);

true 100 100

// Wichtig · Fallstricke

Nur lesbar: Eine Zuweisung an animVal wird außerhalb des Strict Mode stillschweigend ignoriert. Im Strict Mode, also auch in ES-Modulen, löst sie einen TypeError aus. Ändere Werte daher über baseVal oder setAttribute().
Nur SMIL zählt: animVal berücksichtigt nur SMIL-Animationen (<animate>, <set>). CSS-Animationen, CSS-Transitions und die Web Animations API ändern animVal in der Regel nicht. Für solche Werte ist getComputedStyle() der richtige Weg, sofern es sich um eine CSS-Eigenschaft handelt.
Ist das Attribut nicht gesetzt, liefert animVal den Standardwert laut Spezifikation, meist 0. Ungültige Werte führen ebenfalls zum Standardwert.
Einige Filterattribute mit zwei Zahlen, etwa stdDeviation oder baseFrequency, werden auf zwei SVGAnimatedNumber-Eigenschaften aufgeteilt (stdDeviationX/stdDeviationY). Listen wie values von <feColorMatrix> nutzen dagegen SVGAnimatedNumberList.
Kompatibilität: wird von allen modernen Browsern unterstützt. Wie genau animVal während einer SMIL-Animation aktualisiert wird, kann sich zwischen den Browsern leicht unterscheiden.

Siehe auch

SVGAnimatedNumber.baseVal SVGAnimatedNumber SVGAnimatedLength.animVal SVGAnimatedNumberList SVGStopElement.offset SVGGeometryElement.pathLength SpeechSynthesisUtterance.rate