SVGAnimatedEnumeration.animVal — Eigenschaft · JavaScript-Referenz

Signatur

readonly attribute unsigned short SVGAnimatedEnumeration.animVal

Beschreibung

animVal ist eine schreibgeschützte Eigenschaft von SVGAnimatedEnumeration. Sie gibt den aktuell wirksamen Wert eines SVG-Attributs zurück, das nur bestimmte Schlüsselwörter erlaubt, zum Beispiel clipPathUnits, spreadMethod, markerUnits, lengthAdjust oder type bei <feTurbulence>. Du bekommst dabei kein Schlüsselwort als Zeichenkette, sondern eine Zahl, die einer Konstanten der jeweiligen Schnittstelle entspricht, etwa SVGUnitTypes.SVG_UNIT_TYPE_OBJECTBOUNDINGBOX (= 2).

Wie animVal und baseVal zusammenhängen:

baseVal ist der im Markup bzw. per Skript gesetzte Grundwert und lässt sich ändern.
animVal ist der Wert, den der Browser gerade tatsächlich verwendet. Läuft eine SMIL-Animation wie <set> oder <animate>, kann er sich vom Grundwert unterscheiden. Ohne Animation sind beide Werte gleich.

Du brauchst animVal, wenn du den momentan gültigen Zustand eines Elements auslesen willst, zum Beispiel zur Fehlersuche bei Animationen oder für Berechnungen, die sich nach dem gerade aktiven Einheitensystem richten. Den Wert ändern kannst du nur über baseVal oder setAttribute().

Rückgabewert

Typ

number

Beschreibung

Eine Ganzzahl (unsigned short), die einer Aufzählungskonstanten der jeweiligen Schnittstelle entspricht. 0 bedeutet in der Regel UNKNOWN, also einen unbekannten oder ungültigen Wert.

Beispiele

clipPathUnits auslesen und einer Konstanten zuordnen

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

const units = clip.clipPathUnits; // SVGAnimatedEnumeration
console.log(units.animVal);
console.log(units.animVal === SVGUnitTypes.SVG_UNIT_TYPE_OBJECTBOUNDINGBOX);

2 true

Zahlenwert in lesbaren Namen umwandeln (spreadMethod)

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

const spreadNames = {
  [SVGGradientElement.SVG_SPREADMETHOD_UNKNOWN]: 'unknown',
  [SVGGradientElement.SVG_SPREADMETHOD_PAD]: 'pad',
  [SVGGradientElement.SVG_SPREADMETHOD_REFLECT]: 'reflect',
  [SVGGradientElement.SVG_SPREADMETHOD_REPEAT]: 'repeat'
};

const { animVal } = grad.spreadMethod;
console.log(`spreadMethod = ${spreadNames[animVal]} (${animVal})`);

spreadMethod = repeat (3)

baseVal und animVal während einer SMIL-Animation vergleichen

document.body.insertAdjacentHTML('beforeend', `
  <svg width="200" height="50">
    <linearGradient id="g" x2="0.2" spreadMethod="pad">
      <stop offset="0" stop-color="teal"/>
      <stop offset="1" stop-color="gold"/>
      <set attributeName="spreadMethod" to="reflect" begin="0s"/>
    </linearGradient>
    <rect width="200" height="50" fill="url(#g)"/>
  </svg>`);

const grad = document.getElementById('g');

// Kurz warten, bis die Animation aktiv ist
setTimeout(() => {
  const { baseVal, animVal } = grad.spreadMethod;
  console.log({ baseVal, animVal });
}, 100);

{ baseVal: 1, animVal: 2 }

Schreibversuch schlägt fehl – stattdessen baseVal setzen

'use strict';
const svgNS = 'http://www.w3.org/2000/svg';
const marker = document.createElementNS(svgNS, 'marker');

try {
  marker.markerUnits.animVal = SVGMarkerElement.SVG_MARKERUNITS_USERSPACEONUSE;
} catch (err) {
  console.log(err.name);
}

// Richtiger Weg:
marker.markerUnits.baseVal = SVGMarkerElement.SVG_MARKERUNITS_USERSPACEONUSE;
console.log(marker.markerUnits.animVal);

TypeError 1

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung an animVal wird ohne Strict Mode stillschweigend ignoriert. Im Strict Mode wirft sie einen TypeError. Ändern kannst du den Wert über baseVal oder setAttribute().
Zahl statt Schlüsselwort: Du bekommst keine Zeichenkette wie "reflect", sondern eine Zahl. Vergleiche immer mit den benannten Konstanten (z. B. SVGGradientElement.SVG_SPREADMETHOD_REFLECT) und nicht mit festen Zahlen im Code. Das Schlüsselwort selbst liefert getAttribute().
Wert 0 (UNKNOWN): Bei einem ungültigen Attributwert oder einem Schlüsselwort, das in der Schnittstelle nicht definiert ist, kann 0 zurückkommen.
Animationen: animVal unterscheidet sich nur bei SMIL-Animationen von baseVal. CSS-Animationen und die Web Animations API ändern diese Aufzählungsattribute nicht. Ältere Browser, vor allem ältere Chromium-Versionen, gaben bei manchen Attributen auch während einer Animation den Grundwert zurück. Prüfe das Verhalten deshalb im Zielbrowser.
Kompatibilität: Die Eigenschaft wird von allen modernen Browsern unterstützt. In SVG 2 bleibt sie erhalten.

Siehe auch

SVGAnimatedEnumeration SVGAnimatedEnumeration.baseVal SVGUnitTypes SVGGradientElement SVGClipPathElement SVGAnimatedLength.animVal ServiceWorkerRegistration.paymentManager