SVGAnimatedBoolean.animVal — Eigenschaft · JavaScript-Referenz

Signatur

SVGAnimatedBoolean.animVal

Beschreibung

animVal gehört zum Interface SVGAnimatedBoolean. Das Interface steht für SVG-Attribute, die nur die Werte true oder false annehmen und per SMIL animiert werden können. Das wichtigste Beispiel ist SVGFEConvolveMatrixElement.preserveAlpha, also das Attribut preserveAlpha des Filterelements <feConvolveMatrix>.

Jedes SVGAnimatedBoolean hat zwei Werte. baseVal ist der Grundwert aus dem Markup oder aus einem Skript. animVal ist der Wert, der gerade tatsächlich gilt. Läuft eine Animation, etwa mit <set> oder <animate>, soll animVal den animierten Wert zeigen. Läuft keine Animation, haben animVal und baseVal denselben Wert.

Verwende animVal, wenn du den aktuell wirksamen Zustand auslesen willst, zum Beispiel für Debugging oder um ein Skript mit einer laufenden Animation abzustimmen. Wenn du den Wert ändern willst, schreibst du in baseVal. animVal ist schreibgeschützt.

Rückgabewert

Typ

boolean

Beschreibung

Der aktuelle Wert des Attributs, bei laufender Animation der animierte Wert. Fehlt das Attribut, kommt der Standardwert zurück (bei preserveAlpha ist das false).

Beispiele

preserveAlpha eines feConvolveMatrix-Filters auslesen

const SVG_NS = 'http://www.w3.org/2000/svg';
const conv = document.createElementNS(SVG_NS, 'feConvolveMatrix');
conv.setAttribute('kernelMatrix', '0 -1 0 -1 5 -1 0 -1 0');
conv.setAttribute('preserveAlpha', 'true');

// Aktuell wirksamen Wert lesen
console.log(conv.preserveAlpha.animVal);
console.log(typeof conv.preserveAlpha.animVal);

true boolean

baseVal ändern, animVal übernimmt den Wert

const SVG_NS = 'http://www.w3.org/2000/svg';
const conv = document.createElementNS(SVG_NS, 'feConvolveMatrix');

console.log(conv.preserveAlpha.animVal); // Standardwert

// Nur baseVal darf beschrieben werden
conv.preserveAlpha.baseVal = true;
console.log(conv.getAttribute('preserveAlpha'));
console.log(conv.preserveAlpha.animVal); // keine Animation => gleich baseVal

false true true

animVal ist schreibgeschützt

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

try {
  conv.preserveAlpha.animVal = true;
} catch (err) {
  console.log(err instanceof TypeError); // im Strict Mode: TypeError
}
console.log(conv.preserveAlpha.animVal);

true false

Wert während einer SMIL-Animation mit <set> prüfen

document.body.insertAdjacentHTML('beforeend', `
  <svg width="0" height="0">
    <filter id="f">
      <feConvolveMatrix id="conv" kernelMatrix="1 0 0 0 1 0 0 0 1" preserveAlpha="false">
        <set attributeName="preserveAlpha" to="true" begin="0s" dur="10s" />
      </feConvolveMatrix>
    </filter>
  </svg>`);

const conv = document.getElementById('conv');
setTimeout(() => {
  console.log('baseVal:', conv.preserveAlpha.baseVal);
  console.log('animVal:', conv.preserveAlpha.animVal);
}, 500);

baseVal: false animVal: true (je nach Browser auch false, siehe Hinweise)

// Wichtig · Fallstricke

Uneinheitliches Verhalten der Browser: Viele Engines zeigen SMIL-Animationen in animVal nicht zuverlässig an und liefern dort einfach denselben Wert wie baseVal. Deshalb ist es riskant, Programmlogik auf animierte Werte in animVal aufzubauen.
Schreibgeschützt: Wird animVal ein Wert zugewiesen, passiert im Sloppy Mode stillschweigend nichts. Im Strict Mode wirft das einen TypeError. Änderungen gehören in baseVal oder laufen über setAttribute().
Nur für SVG-Elemente: SVGAnimatedBoolean gibt es nur, wenn das Element im SVG-Namensraum angelegt wurde (createElementNS('http://www.w3.org/2000/svg', …)). Ein mit createElement erzeugtes Element hat keine solchen Eigenschaften.
Veraltete Attribute: externalResourcesRequired war früher ebenfalls ein SVGAnimatedBoolean. Es wurde in SVG 2 entfernt und sollte nicht mehr benutzt werden.
CSS-Animationen wirken nicht auf preserveAlpha, denn es ist ein reines Attribut und keine CSS-Eigenschaft.

Siehe auch

SVGAnimatedBoolean SVGAnimatedBoolean.baseVal SVGFEConvolveMatrixElement SVGFEConvolveMatrixElement.preserveAlpha SVGAnimatedString.animVal SVGAnimateElement