SVGAnimatedNumberList.animVal — Eigenschaft · JavaScript-Referenz

Signatur

SVGAnimatedNumberList.animVal

Beschreibung

Die Eigenschaft animVal eines SVGAnimatedNumberList-Objekts enthält den aktuell wirksamen Wert eines animierbaren SVG-Attributs, das aus einer Liste von Zahlen besteht. Läuft gerade eine SMIL-Animation (z. B. <animate>) auf dem Attribut, spiegelt animVal den animierten Zustand wider. Sonst entspricht sie dem Basiswert aus baseVal.

Typische Attribute vom Typ SVGAnimatedNumberList sind:

rotate an <text> und <tspan> (SVGTextPositioningElement.rotate)
values an <feColorMatrix>
tableValues an <feFuncR>, <feFuncG>, <feFuncB> und <feFuncA>
kernelMatrix an <feConvolveMatrix>

Die zurückgegebene SVGNumberList lässt sich nur lesen. Methoden wie appendItem(), clear() oder das Setzen von SVGNumber.value lösen auf ihr einen NoModificationAllowedError aus. Wenn du den Wert ändern willst, arbeite mit baseVal oder mit setAttribute().

Rückgabewert

Typ

SVGNumberList

Beschreibung

Eine schreibgeschützte, „lebende“ Liste von SVGNumber-Objekten mit dem aktuell animierten Wert. Die Einträge liest du über getItem(index) und numberOfItems bzw. length.

Beispiele

Rotationswerte eines Text-Elements auslesen

// &lt;svg&gt;&lt;text id="label" x="10" y="30" rotate="0 15 30 45"&gt;ABCD&lt;/text&gt;&lt;/svg&gt;
const text = document.getElementById('label');
const list = text.rotate.animVal;

const winkel = [];
for (let i = 0; i < list.numberOfItems; i++) {
  winkel.push(list.getItem(i).value);
}
console.log(winkel);

[0, 15, 30, 45]

baseVal und animVal während einer SMIL-Animation vergleichen

// &lt;text id="t" x="10" y="40" rotate="0"&gt;Hallo
//   &lt;animate attributeName="rotate" from="0" to="90" dur="2s" fill="freeze"/&gt;
// &lt;/text&gt;
const t = document.getElementById('t');

const toArray = (numList) =>
  Array.from({ length: numList.numberOfItems }, (_, i) => numList.getItem(i).value);

setTimeout(() => {
  console.log('baseVal:', toArray(t.rotate.baseVal));
  console.log('animVal:', toArray(t.rotate.animVal));
}, 1000);

baseVal: [0] animVal: [45] // ungefährer Wert; hängt vom Browser ab

Schreibversuch auf animVal abfangen

// &lt;feColorMatrix id="cm" type="saturate" values="0.5"/&gt;
const cm = document.getElementById('cm');
const svg = cm.ownerSVGElement;

try {
  const n = svg.createSVGNumber();
  n.value = 1;
  cm.values.animVal.appendItem(n);
} catch (err) {
  console.log(err.name);
}

// Richtig: Basiswert ändern
cm.values.baseVal.getItem(0).value = 1;
console.log(cm.getAttribute('values'));

NoModificationAllowedError 1

// Wichtig · Fallstricke

Nur lesbar: Wer die Liste unter animVal oder eines ihrer SVGNumber-Elemente ändern will, bekommt einen NoModificationAllowedError. Änderungen gehören in baseVal.
Browserunterschiede: Einige Engines (vor allem Chromium-basierte) trennen animVal nicht zuverlässig von baseVal. Dort kann animVal auch während einer laufenden SMIL-Animation den Basiswert liefern. Verlasse dich also nicht darauf, dass sich der Animationsfortschritt über alle Browser hinweg gleich auslesen lässt.
CSS-Animationen und die Web Animations API wirken sich in der Regel nicht auf animVal aus. Die Eigenschaft ist für SMIL-Animationen gedacht.
Die Liste ist „lebendig“: Eine gespeicherte Referenz zeigt spätere Änderungen am Attribut an, ohne dass du sie neu abfragen musst.
Die Eigenschaft wird seit SVG 1.1 in allen modernen Browsern unterstützt.

Siehe auch

SVGAnimatedNumberList.baseVal SVGAnimatedNumberList SVGNumberList SVGNumber SVGTextPositioningElement.rotate SVGFEColorMatrixElement.values