SVGAnimatedString.animVal — Eigenschaft · JavaScript-Referenz

Signatur

SVGAnimatedString.animVal

Beschreibung

animVal ist die schreibgeschützte Hälfte eines SVGAnimatedString-Objekts. Solche Objekte liefert das SVG-DOM überall dort, wo ein String-Attribut animierbar sein kann, z. B. SVGElement.className, SVGUseElement.href, SVGAElement.href/target, SVGImageElement.href oder die Filter-Attribute in1, in2 und result.

Das Gegenstück ist baseVal: Es enthält den im Markup bzw. per Skript gesetzten Grundwert und lässt sich beschreiben. animVal soll dagegen den Wert wiedergeben, der gerade gilt, also auch während eine SMIL-Animation (<animate>, <set>) das Attribut verändert.

Nutze animVal nur zum Lesen, etwa zur Fehlersuche bei Animationen oder um den aktuell gültigen Wert zu prüfen. Wenn du Werte ändern willst, schreibe immer in baseVal oder rufe setAttribute() auf.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle (ggf. animierte) Wert des reflektierten Attributs. Fehlt das Attribut, ist er meist ein leerer String "".

Beispiele

Klassenname eines SVG-Elements 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('class', 'marker aktiv');
svg.append(circle);

// className ist bei SVG ein SVGAnimatedString, kein String!
console.log(typeof circle.className);    // Objekt
console.log(circle.className.baseVal);   // Grundwert
console.log(circle.className.animVal);   // aktueller Wert

object marker aktiv marker aktiv

href eines <use>-Elements prüfen

document.body.insertAdjacentHTML('beforeend', `
  <svg width="100" height="100">
    <defs><circle id="punkt" cx="50" cy="50" r="20"/></defs>
    <use id="ref" href="#punkt"/>
  </svg>`);

const use = document.getElementById('ref');
console.log(use.href.animVal);

// Den Wert änderst du über baseVal, nicht über animVal
use.href.baseVal = '#anderes';
console.log(use.href.animVal);

#punkt #anderes

Schreibversuch im Strict Mode

'use strict';
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('class', 'box');

try {
  rect.className.animVal = 'neu'; // Getter ohne Setter
} catch (err) {
  console.log(err.name);
}
console.log(rect.className.animVal);

TypeError box

// Wichtig · Fallstricke

Schreibgeschützt: Im nicht-strikten Code wird eine Zuweisung an animVal stillschweigend ignoriert. Im Strict Mode, also auch in ES-Modulen und Klassen, wirft sie einen TypeError.
Browser verhalten sich unterschiedlich: Laut SVG 2 liefert animVal bei SVGAnimatedString denselben Wert wie baseVal. Ältere Implementierungen geben während einer SMIL-Animation dagegen den animierten Wert zurück. Verlasse dich deshalb nicht darauf, dass sich animVal während einer Animation ändert.
Häufiger Fehler: Bei SVG-Elementen ist element.className kein String. Code wie el.className.includes('x') schlägt fehl. Nimm besser el.classList oder el.getAttribute('class').
Das veraltete xlink:href wird über dieselbe href-Eigenschaft gespiegelt. Hat ein Element beide Attribute, gilt href.

Siehe auch

SVGAnimatedString SVGAnimatedString.baseVal SVGUseElement.href Element.classList Element.getAttribute() TextEncoderStream.writable