SVGAnimatedEnumeration.baseVal — Eigenschaft · JavaScript-Referenz

Signatur

SVGAnimatedEnumeration.baseVal

Beschreibung

Die Eigenschaft baseVal einer SVGAnimatedEnumeration steht für den Basiswert eines SVG-Attributs, das nur eine feste Menge von Schlüsselwörtern annehmen kann, z. B. spreadMethod bei Verläufen, clipPathUnits bei <clipPath>, gradientUnits, filterUnits oder mode bei <feBlend>. Das Schlüsselwort wird dabei nicht als Zeichenkette, sondern als Zahl dargestellt, die einer Konstanten der jeweiligen Schnittstelle entspricht (etwa SVGGradientElement.SVG_SPREADMETHOD_REFLECT).

Die Eigenschaft kann gelesen und geschrieben werden. Wenn Sie baseVal setzen, aktualisiert der Browser sofort das zugehörige Attribut im DOM. Aus gradient.spreadMethod.baseVal = 2 wird also spreadMethod="reflect". Umgekehrt wirkt sich auch setAttribute() auf baseVal aus.

Im Unterschied dazu ist animVal schreibgeschützt und liefert den Wert, der gerade tatsächlich gilt. Während einer SMIL-Animation (z. B. mit <set> oder <animate>) können sich baseVal und animVal unterscheiden. Ohne Animation sind beide gleich.

Verwenden Sie baseVal, wenn Sie Aufzählungsattribute ohne Zeichenkettenvergleich prüfen oder ändern möchten, etwa in Editoren, Visualisierungsbibliotheken oder beim dynamischen Umschalten von Filter- und Verlaufsmodi.

Parameter

Name	Typ	Default	Beschreibung
$value	number		Nur beim Setzen: eine gültige Aufzählungskonstante der jeweiligen Schnittstelle (Ganzzahl ≥ 1). Der Wert `0` (`*_UNKNOWN`) und unbekannte Werte sind nicht zulässig.

Rückgabewert

Typ

number

Beschreibung

Eine Ganzzahl (unsigned short), die einer Aufzählungskonstanten entspricht, z. B. 1 für SVG_SPREADMETHOD_PAD. Bei einem unbekannten oder ungültigen Attributwert ist das Ergebnis 0 (*_UNKNOWN).

Beispiele

spreadMethod eines Verlaufs auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const grad = document.createElementNS(svgNS, 'linearGradient');
grad.setAttribute('spreadMethod', 'repeat');

const value = grad.spreadMethod.baseVal;
const names = {
  [SVGGradientElement.SVG_SPREADMETHOD_PAD]: 'pad',
  [SVGGradientElement.SVG_SPREADMETHOD_REFLECT]: 'reflect',
  [SVGGradientElement.SVG_SPREADMETHOD_REPEAT]: 'repeat'
};
console.log(value, names[value]);

3 repeat

baseVal setzen: das Attribut wird automatisch angepasst

const svgNS = 'http://www.w3.org/2000/svg';
const clip = document.createElementNS(svgNS, 'clipPath');

console.log(clip.clipPathUnits.baseVal); // Standard: userSpaceOnUse

clip.clipPathUnits.baseVal = SVGUnitTypes.SVG_UNIT_TYPE_OBJECTBOUNDINGBOX;
console.log(clip.getAttribute('clipPathUnits'));

1 objectBoundingBox

Blend-Modus per Schaltfläche umschalten

// HTML: <svg><filter id="f"><feBlend id="blend" in="SourceGraphic" in2="BackgroundImage"/></filter></svg>
//       <button id="toggle">Modus wechseln</button>
const blend = document.getElementById('blend');
const { SVG_FEBLEND_MODE_NORMAL, SVG_FEBLEND_MODE_MULTIPLY } = SVGFEBlendElement;

document.getElementById('toggle').addEventListener('click', () => {
  const isNormal = blend.mode.baseVal === SVG_FEBLEND_MODE_NORMAL;
  blend.mode.baseVal = isNormal ? SVG_FEBLEND_MODE_MULTIPLY : SVG_FEBLEND_MODE_NORMAL;
  console.log('Neuer Modus:', blend.getAttribute('mode'));
});

Neuer Modus: multiply

Ungültige Werte abfangen

const grad = document.createElementNS('http://www.w3.org/2000/svg', 'radialGradient');

try {
  grad.spreadMethod.baseVal = 0; // SVG_SPREADMETHOD_UNKNOWN
} catch (err) {
  console.log(err.name);
}

TypeError

// Wichtig · Fallstricke

Zahlen statt Zeichenketten: baseVal gibt nie das Schlüsselwort zurück ("reflect"), sondern immer die Zahl dazu. Nutzen Sie die Konstanten der Schnittstelle (z. B. SVGGradientElement.SVG_SPREADMETHOD_REFLECT, SVGUnitTypes.SVG_UNIT_TYPE_OBJECTBOUNDINGBOX) und keine festen Zahlen im Code.
Ungültige Werte: Wenn Sie 0 (UNKNOWN) oder einen Wert außerhalb des gültigen Bereichs setzen, werfen aktuelle Browser nach SVG 2 einen TypeError. Ältere Implementierungen warfen stattdessen eine DOMException (SVG_INVALID_VALUE_ERR).
Neue Schlüsselwörter: Für Werte, die erst in neueren Spezifikationen hinzukamen (z. B. manche feBlend-Modi wie color-dodge), gibt es teilweise keine Konstante. Dann kann baseVal 0 liefern. Lesen Sie in diesem Fall besser mit getAttribute().
Animationen: Während einer SMIL-Animation zeigt baseVal nicht den sichtbaren Wert. Dafür ist animVal zuständig.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Die Eigenschaft gibt es nur bei SVG-Elementen, die mit createElementNS() im SVG-Namensraum erzeugt wurden.

Siehe auch

SVGAnimatedEnumeration SVGAnimatedEnumeration.animVal SVGGradientElement SVGFEBlendElement SVGClipPathElement Element.setAttribute() ServiceWorkerRegistration.updateViaCache