SVGAnimatedBoolean — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGAnimatedBoolean

Beschreibung

Die Schnittstelle SVGAnimatedBoolean steht für SVG-Attribute, die nur true oder false sein und per SMIL animiert werden können (etwa mit <set>). Solche Objekte erzeugt man nicht selbst. Man bekommt sie als Eigenschaft eines SVG-Elements. Im aktuellen SVG-2-Standard ist das vor allem SVGFEConvolveMatrixElement.preserveAlpha.

Die Schnittstelle hat zwei Eigenschaften:

baseVal (boolean, lesen und schreiben): der im Markup oder per Skript gesetzte Grundwert. Wenn man ihn ändert, wird das zugehörige Attribut im DOM mit geändert.
animVal (boolean, nur lesen): der Wert, der gerade gilt. Läuft eine Animation, kann er von baseVal abweichen. Ohne Animation sind beide gleich.

Du nutzt SVGAnimatedBoolean, wenn du boolesche Filter-Optionen typsicher lesen oder ändern willst, ohne Zeichenketten mit getAttribute() und setAttribute() auszuwerten. Die Schnittstelle hat keinen Konstruktor. new SVGAnimatedBoolean() wirft einen TypeError.

Parameter

Name	Typ	Default	Beschreibung
$baseVal	boolean	false	Grundwert des Attributs (lesen und schreiben). Wenn du ihn schreibst, wird das Attribut im Markup auf `"true"` oder `"false"` gesetzt.
$animVal	boolean		Aktueller, eventuell animierter Wert (nur lesen). Ohne laufende Animation gleich `baseVal`.

Rückgabewert

Typ

SVGAnimatedBoolean

Beschreibung

Ein Objekt mit den Eigenschaften baseVal und animVal, das direkt mit dem Attribut des Elements verbunden ist. Änderungen am Attribut sind also sofort im Objekt sichtbar und umgekehrt.

Beispiele

preserveAlpha eines Faltungsfilters auslesen

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

const flag = conv.preserveAlpha;
console.log(flag instanceof SVGAnimatedBoolean);
console.log(flag.baseVal, flag.animVal);

true true true

Grundwert per Skript ändern (Attribut wird mit geändert)

const conv = document.querySelector("feConvolveMatrix");

conv.preserveAlpha.baseVal = false;
console.log(conv.getAttribute("preserveAlpha"));

conv.setAttribute("preserveAlpha", "true");
console.log(conv.preserveAlpha.baseVal);

false true

Filter-Option per Button umschalten

// HTML: <svg><filter id="sharpen"><feConvolveMatrix order="3"
//   kernelMatrix="0 -1 0 -1 5 -1 0 -1 0"/></filter></svg>
//       <button id="toggle">Alpha erhalten</button>
const conv = document.querySelector("#sharpen feConvolveMatrix");
const button = document.querySelector("#toggle");

const toggleAlpha = () => {
  const flag = conv.preserveAlpha;
  flag.baseVal = !flag.baseVal;
  button.textContent = flag.baseVal ? "Alpha erhalten: an" : "Alpha erhalten: aus";
};

button.addEventListener("click", toggleAlpha);

// Wichtig · Fallstricke

animVal ist schreibgeschützt: In ES-Modulen und im Strict Mode wirft eine Zuweisung einen TypeError. Im Sloppy Mode wird sie ohne Fehlermeldung ignoriert. Ändere Werte immer über baseVal.
Ungültige Werte: Steht im Attribut etwas anderes als \"true\" oder \"false\" (auch \"1\" oder \"TRUE\"), gilt der Standardwert, meist false.
Kein Konstruktor: Instanzen entstehen nur als Eigenschaften von SVG-Elementen. Das Objekt ist live, du kannst es also einmal holen und danach weiterverwenden.
Veraltete Eigenschaft: externalResourcesRequired (SVG 1.1) gab ebenfalls ein SVGAnimatedBoolean zurück. Sie wurde in SVG 2 entfernt und fehlt in aktuellen Browsern.
Kompatibilität: Die Schnittstelle wird von allen modernen Browsern unterstützt. Wie gut animVal laufende SMIL-Animationen wiedergibt, kann sich zwischen Browsern unterscheiden. Verlass dich deshalb nicht auf exakte Zwischenwerte.

Siehe auch

SVGFEConvolveMatrixElement SVGAnimatedString SVGAnimatedNumber SVGAnimatedEnumeration SVGAnimatedLength SVGElement