Signatur
Beschreibung
Die Eigenschaft animVal der Schnittstelle SVGAnimatedLength liefert ein schreibgeschütztes SVGLength-Objekt. Es steht für den aktuell wirksamen Wert eines Längenattributs wie width, height, x, y, r, cx oder cy. Anders als in der MDN-Kurzbeschreibung angegeben geht es dabei nicht um eine Enumeration, sondern um eine Länge mit Einheit.
Läuft auf dem Attribut gerade eine deklarative SMIL-Animation (<animate>, <set>), enthält animVal den animierten Zwischenwert. baseVal enthält dagegen den im Markup bzw. per Skript gesetzten Grundwert. Ohne aktive Animation haben beide denselben Wert.
Über das zurückgegebene SVGLength liest du den Wert in Benutzereinheiten (value), in der angegebenen Einheit (valueInSpecifiedUnits), als Zeichenkette (valueAsString) oder den Einheitentyp (unitType). Das ist nützlich, wenn du zum Beispiel die aktuelle Position oder Größe eines animierten Elements für Kollisionsprüfungen, Tooltips oder Synchronisierung mit anderen Elementen auslesen willst.
Rückgabewert
SVGLength-Objekt mit dem aktuellen, ggf. animierten Wert. Jeder Versuch, es zu verändern, löst eine DOMException vom Typ NoModificationAllowedError aus.Beispiele
Radius eines Kreises auslesen
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('r', '2em');
svg.append(circle);
document.body.append(svg);
const r = circle.r.animVal;
console.log(r.valueAsString); // Zeichenkette mit Einheit
console.log(r.valueInSpecifiedUnits); // Zahl in der angegebenen Einheit
console.log(r.unitType === SVGLength.SVG_LENGTHTYPE_EMS);
console.log(r.value); // Wert in Benutzereinheiten (px)Grundwert und animierten Wert während einer SMIL-Animation vergleichen
// HTML:
// <svg width="200" height="100">
// <rect id="bar" x="0" y="40" width="10" height="20">
// <animate attributeName="width" from="10" to="200" dur="2s" repeatCount="indefinite" />
// </rect>
// </svg>
const bar = document.getElementById('bar');
const log = () => {
const base = bar.width.baseVal.value;
const anim = bar.width.animVal.value;
console.log(`Grundwert: ${base}, aktuell: ${anim.toFixed(1)}`);
};
setInterval(log, 500);animVal ist schreibgeschützt
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('width', '100');
try {
rect.width.animVal.value = 50;
} catch (err) {
console.log(err.name);
}
// Richtig: den Grundwert ändern
rect.width.baseVal.value = 50;
console.log(rect.getAttribute('width'));// Wichtig · Fallstricke
- Schreibschutz: Wenn du
value,valueInSpecifiedUnitsodervalueAsStringsetzt odernewValueSpecifiedUnits()bzw.convertToSpecifiedUnits()aufanimValaufrufst, wird einNoModificationAllowedErrorausgelöst. Änderungen gehören immer anbaseVal. - Nur SMIL:
animValberücksichtigt ausschließlich SVG-/SMIL-Animationen. CSS-Animationen, CSS-Transitions und die Web Animations API auf Eigenschaften wiewidthoderrwerden hier nicht abgebildet. In diesem Fall hilftgetComputedStyle()odergetBBox(). - Browser-Unterschiede: In einigen Browsern (vor allem in älteren Chromium-Versionen) gab
animValbei bestimmten Attributen den Grundwert statt des animierten Werts zurück. Teste das Verhalten, wenn du dich darauf verlässt. - Relative Einheiten: Bei Prozent- oder
em-Werten hängtvaluevom Viewport bzw. von der Schriftgröße ab. Das Element muss dafür im Dokument eingehängt sein, sonst sind die Ergebnisse unzuverlässig. - Das zurückgegebene Objekt ist „live“: Es spiegelt spätere Änderungen wider, du musst es also nicht bei jedem Auslesen neu abfragen.