SVGAnimatedString — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGAnimatedString

Beschreibung

Die Schnittstelle SVGAnimatedString steht für ein Attribut eines SVG-Elements, das eine Zeichenfolge enthält und über SVG-Animationen (SMIL, z. B. <set> oder <animate>) verändert werden kann. Beispiele sind SVGElement.className, SVGAElement.target, SVGUseElement.href und SVGFEBlendElement.in1.

Die Schnittstelle hat zwei Eigenschaften:

baseVal: der statische Grundwert des Attributs, also der Wert im Markup. Man kann ihn lesen und schreiben. Wenn man ihn setzt, ändert sich auch das zugehörige Attribut im DOM.
animVal: der Wert, der gerade gilt, also inklusive laufender Animationen. Diesen Wert kann man nur lesen. Ohne aktive Animation ist er gleich baseVal.

In der Praxis begegnet einem SVGAnimatedString vor allem dann, wenn man bei SVG-Elementen auf element.className zugreift. Anders als bei HTML-Elementen ist das Ergebnis dort kein String, sondern ein SVGAnimatedString-Objekt. Das ist eine häufige Fehlerquelle in Code, der für HTML und SVG gleichermaßen gedacht ist.

Rückgabewert

Typ

SVGAnimatedString

Beschreibung

Die Schnittstelle kann man nicht selbst erzeugen. Man erhält sie über Eigenschaften von SVG-Elementen, z. B. svgElement.className oder useElement.href.

Beispiele

className eines SVG-Elements auslesen und setzen

const svgNS = 'http://www.w3.org/2000/svg';
const circle = document.createElementNS(svgNS, 'circle');
circle.setAttribute('class', 'punkt aktiv');

// Bei SVG ist className ein SVGAnimatedString, kein String
console.log(circle.className instanceof SVGAnimatedString);
console.log(circle.className.baseVal);

// Basiswert ändern – das Attribut im DOM wird mit aktualisiert
circle.className.baseVal = 'punkt inaktiv';
console.log(circle.getAttribute('class'));

true punkt aktiv punkt inaktiv

href eines <use>-Elements auswerten

document.body.insertAdjacentHTML('beforeend', `
  <svg width="0" height="0">
    <symbol id="icon-stern"><path d="M0 0"/></symbol>
    <use id="ref" href="#icon-stern"/>
  </svg>`);

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

// Auf ein anderes Symbol umstellen
use.href.baseVal = '#icon-herz';
console.log(use.getAttribute('href'));

#icon-stern #icon-herz

Unterschied zwischen baseVal und animVal bei einer SMIL-Animation

document.body.insertAdjacentHTML('beforeend', `
  <svg>
    <a id="link" href="https://example.com" target="_self">
      <set attributeName="target" to="_blank" begin="0s" dur="10s"/>
      <text y="20">Link</text>
    </a>
  </svg>`);

const link = document.getElementById('link');
// Kurz warten, damit die Animation läuft
setTimeout(() => {
  console.log('Basis:', link.target.baseVal);
  console.log('Animiert:', link.target.animVal);
}, 100);

Basis: _self Animiert: _blank

Klassennamen für HTML und SVG einheitlich lesen

const getClassName = (el) =>
  typeof el.className === 'string'
    ? el.className
    : el.className?.baseVal ?? '';

const div = document.createElement('div');
div.className = 'box';
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('class', 'flaeche');

console.log(getClassName(div), getClassName(rect));

box flaeche

// Wichtig · Fallstricke

Häufiger Fallstrick: svgElement.className liefert keinen String. Code wie el.className.split(' ') oder el.className.includes('x') bricht bei SVG-Elementen mit einem TypeError ab. Nimm besser el.classList oder el.getAttribute('class'), die bei HTML und SVG gleich funktionieren.
el.className = 'neu' hat bei SVG-Elementen keine Wirkung, weil className dort nur lesbar ist. Im strikten Modus wirft die Zuweisung einen TypeError. Setze stattdessen el.className.baseVal.
animVal kann man nur lesen. Wenn man versucht, den Wert zu setzen, wird das ignoriert oder es wird ein Fehler geworfen.
Die meisten Browser verändern animVal bei Zeichenfolgenattributen nur bei SMIL-Animationen. CSS-Animationen und Web Animations wirken sich nicht darauf aus.
SVGUseElement.href berücksichtigt auch das veraltete xlink:href. Wenn beide Attribute vorhanden sind, gewinnt href.
Die Schnittstelle wird von allen modernen Browsern unterstützt. Einen Konstruktor gibt es nicht: new SVGAnimatedString() wirft einen TypeError.

Siehe auch

SVGAnimatedRect SVGAnimateElement SVGAnimatedAngle SVGAnimatedInteger SVGAnimatedLength