SVGAnimatedString.baseVal — Eigenschaft · JavaScript-Referenz

Signatur

SVGAnimatedString.baseVal

Beschreibung

baseVal ist eine les- und schreibbare Eigenschaft der Schnittstelle SVGAnimatedString. Sie enthält den Basiswert eines SVG-Attributs vom Typ Zeichenkette, also den Wert, der im Markup steht oder per Skript gesetzt wurde. Laufende SMIL-Animationen wirken sich nicht auf ihn aus.

Auf SVGAnimatedString-Objekte trifft man vor allem bei SVGElement.className und bei SVGAElement.href, SVGUseElement.href oder SVGImageElement.href (alle aus SVGURIReference). Anders als bei HTML-Elementen liefern diese Eigenschaften keinen String, sondern ein Objekt. Den eigentlichen Text bekommt man erst über .baseVal, den aktuell animierten Wert über .animVal.

Wenn man baseVal einen Wert zuweist, wird das zugehörige Attribut im DOM sofort aktualisiert. Bei href wird dabei, je nach Browser, das Attribut href oder das ältere xlink:href geschrieben. Wer das Attribut ganz sicher treffen will, verwendet setAttribute().

Parameter

Name	Typ	Default	Beschreibung
$wert	string		Nur beim Schreiben: der neue Basiswert. Andere Typen werden in einen String umgewandelt.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Basiswert des Attributs. Fehlt das Attribut, ist es in der Regel ein leerer String "".

Beispiele

Klassennamen eines SVG-Elements lesen

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

// className ist hier ein SVGAnimatedString, kein String
console.log(typeof kreis.className);
console.log(kreis.className.baseVal);

object punkt aktiv

Link-Ziel eines SVG-<a>-Elements ändern

const svgNS = 'http://www.w3.org/2000/svg';
const link = document.createElementNS(svgNS, 'a');
link.setAttribute('href', '/start');

link.href.baseVal = '/kontakt';
console.log(link.href.baseVal);
console.log(link.getAttribute('href'));

/kontakt /kontakt

Klassennamen für HTML und SVG einheitlich auslesen

// Hilfsfunktion, die bei HTML- und SVG-Elementen funktioniert
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

Symbol-Referenz eines <use>-Elements umschalten

const svgNS = 'http://www.w3.org/2000/svg';
const use = document.createElementNS(svgNS, 'use');
use.href.baseVal = '#icon-play';

const toggle = () => {
  use.href.baseVal = use.href.baseVal === '#icon-play' ? '#icon-pause' : '#icon-play';
};
toggle();
console.log(use.href.baseVal);

#icon-pause

// Wichtig · Fallstricke

Häufiger Fallstrick: Bei SVG-Elementen liefert el.className ein SVGAnimatedString. Code wie el.className.split(' ') oder el.className.includes('x') wirft deshalb einen TypeError. Nutze el.className.baseVal, el.classList oder el.getAttribute('class').
Eine Zuweisung an el.className = 'x' ersetzt bei SVG nicht die Klasse. Im strikten Modus kann sie einen Fehler auslösen. Richtig ist el.className.baseVal = 'x'.
animVal ist schreibgeschützt. Solange keine Animation läuft, entspricht er baseVal.
Wird href.baseVal gesetzt, schreiben ältere Browser eventuell xlink:href. xlink:href ist in SVG 2 veraltet. Für neuen Code ist setAttribute('href', …) die sicherste Wahl.
Sicherheit: Setzt du href.baseVal auf Werte aus Benutzereingaben, prüfe sie vorher. javascript:-URLs in SVG-Links können eine XSS-Lücke öffnen.
Wird von allen modernen Browsern unterstützt.

Siehe auch

SVGAnimatedString SVGAnimatedString.animVal Element.classList Element.setAttribute() SVGUseElement TextDecoderStream.fatal