SVGAnimatedInteger.animVal — Eigenschaft · JavaScript-Referenz

Signatur

SVGAnimatedInteger.animVal

Beschreibung

Die Eigenschaft animVal der Schnittstelle SVGAnimatedInteger liefert den Wert, den ein ganzzahliges SVG-Attribut gerade tatsächlich hat. Läuft eine SMIL-Animation wie <animate> oder <set> auf das Attribut, enthält animVal den momentan animierten Wert. Ohne Animation ist der Wert gleich baseVal.

SVGAnimatedInteger-Objekte bekommt man über bestimmte Eigenschaften von Filter-Primitiven, zum Beispiel SVGFETurbulenceElement.numOctaves sowie SVGFEConvolveMatrixElement.orderX, orderY, targetX und targetY. Jede dieser Eigenschaften gibt ein Objekt mit den beiden Werten baseVal und animVal zurück.

Nutze animVal, wenn du wissen willst, was gerade gerendert wird, etwa beim Debuggen von Animationen oder um JavaScript-Logik mit einer laufenden SMIL-Animation abzugleichen. Um einen Wert zu ändern, schreibst du in baseVal oder verwendest setAttribute(). animVal ist immer schreibgeschützt.

Rückgabewert

Typ

number

Beschreibung

Eine Ganzzahl (IDL-Typ long) mit dem aktuellen animierten Wert des Attributs. Ohne aktive Animation ist sie gleich baseVal.

Beispiele

animVal und baseVal ohne Animation vergleichen

const svgNS = 'http://www.w3.org/2000/svg';
const turbulence = document.createElementNS(svgNS, 'feTurbulence');
turbulence.setAttribute('numOctaves', '3');

const { baseVal, animVal } = turbulence.numOctaves;
console.log(baseVal, animVal);

3 3

Animierten Wert während einer SMIL-Animation auslesen

// Im HTML:
// <svg width="200" height="200">
//   <filter id="noise">
//     <feTurbulence id="turb" baseFrequency="0.05" numOctaves="1">
//       <animate attributeName="numOctaves" from="1" to="8" dur="4s" repeatCount="indefinite" />
//     </feTurbulence>
//   </filter>
//   <rect width="200" height="200" filter="url(#noise)" />
// </svg>

const turb = document.getElementById('turb');

const log = () => {
  const { baseVal, animVal } = turb.numOctaves;
  console.log(`Basis: ${baseVal}, aktuell animiert: ${animVal}`);
};

setInterval(log, 1000);

Basis: 1, aktuell animiert: 2 Basis: 1, aktuell animiert: 4 Basis: 1, aktuell animiert: 6 ...

animVal ist schreibgeschützt – stattdessen baseVal setzen

'use strict';
const svgNS = 'http://www.w3.org/2000/svg';
const conv = document.createElementNS(svgNS, 'feConvolveMatrix');
conv.setAttribute('order', '3');

try {
  conv.orderX.animVal = 5; // Fehler im Strict Mode
} catch (err) {
  console.log(err.constructor.name);
}

conv.orderX.baseVal = 5; // richtig so
console.log(conv.orderX.baseVal, conv.orderX.animVal);

TypeError 5 5

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung an animVal wird im Sloppy Mode stillschweigend ignoriert und löst im Strict Mode einen TypeError aus. Änderungen gehören in baseVal oder werden mit setAttribute() gemacht.
animVal berücksichtigt nur SMIL-Animationen (<animate>, <set>). CSS-Animationen und die Web Animations API werden hier normalerweise nicht abgebildet.
Der Wert ist eine Momentaufnahme. Wer ihn fortlaufend beobachten will, muss ihn regelmäßig abfragen (z. B. mit requestAnimationFrame). Für diese Eigenschaft gibt es kein Änderungs-Event.
Bei Attributen wie order von feConvolveMatrix steuert ein einziges Attribut zwei SVGAnimatedInteger-Objekte (orderX und orderY). Steht dort nur ein Wert, gilt er für beide.
Browser-Kompatibilität: Die Eigenschaft wird von allen aktuellen Browsern unterstützt. Ob animVal während einer Animation live aktualisiert wird, kann sich je nach Browser-Engine leicht unterscheiden. Teste das deshalb in den Zielbrowsern.

Siehe auch

SVGAnimatedInteger SVGAnimatedInteger.baseVal SVGFETurbulenceElement.numOctaves SVGFEConvolveMatrixElement.orderX SVGAnimatedNumber.animVal SVGAnimateElement SpeechSynthesisUtterance.lang