Signatur
Beschreibung
Die Eigenschaft baseVal eines SVGAnimatedBoolean-Objekts enthält den Basiswert eines booleschen SVG-Attributs. Das ist der Wert, der im Markup steht oder per Skript gesetzt wurde. Eine laufende SMIL-Animation (<animate>, <set>) ändert ihn nicht. Den Wert, der gerade tatsächlich wirkt, liefert die schreibgeschützte Schwestereigenschaft animVal.
In der Praxis gibt es heute nur noch ein Attribut, das als SVGAnimatedBoolean bereitgestellt wird: preserveAlpha des Filterelements <feConvolveMatrix> (SVGFEConvolveMatrixElement.preserveAlpha). Das frühere Attribut externalResourcesRequired wurde mit SVG 2 entfernt.
baseVal ist lesbar und beschreibbar. Wenn du true oder false zuweist, schreibt der Browser das Inhaltsattribut automatisch als Zeichenkette "true" bzw. "false" um. Umgekehrt spiegelt baseVal sofort jede Änderung, die du über setAttribute() vornimmst. So kannst du boolesche Attribute typsicher umschalten, ohne selbst Zeichenketten zu vergleichen.
Rückgabewert
true oder false). Fehlt das Attribut, erhältst du den Standardwert laut Spezifikation, bei preserveAlpha also false.Beispiele
Basiswert von preserveAlpha auslesen
// SVG mit Faltungsfilter dynamisch erzeugen
const svgNS = 'http://www.w3.org/2000/svg';
const conv = document.createElementNS(svgNS, 'feConvolveMatrix');
conv.setAttribute('kernelMatrix', '0 -1 0 -1 5 -1 0 -1 0');
// Attribut nicht gesetzt: Standardwert
console.log(conv.preserveAlpha.baseVal);
conv.setAttribute('preserveAlpha', 'true');
console.log(conv.preserveAlpha.baseVal);Basiswert per Skript setzen: das Attribut wird mitgeführt
const conv = document.querySelector('#sharpen feConvolveMatrix');
// Alphakanal vom Filter ausnehmen
conv.preserveAlpha.baseVal = true;
console.log(conv.getAttribute('preserveAlpha'));
conv.preserveAlpha.baseVal = false;
console.log(conv.getAttribute('preserveAlpha'));Umschalter für einen Filter in der Oberfläche
// <svg><filter id="sharpen"><feConvolveMatrix kernelMatrix="0 -1 0 -1 5 -1 0 -1 0"/></filter></svg>
// <label><input type="checkbox" id="alpha"> Alpha erhalten</label>
const conv = document.querySelector('#sharpen feConvolveMatrix');
const checkbox = document.querySelector('#alpha');
// Anfangszustand übernehmen
checkbox.checked = conv.preserveAlpha.baseVal;
checkbox.addEventListener('change', () => {
conv.preserveAlpha.baseVal = checkbox.checked;
console.log('preserveAlpha:', conv.preserveAlpha.baseVal);
});baseVal und animVal bei einer SMIL-Animation vergleichen
// <feConvolveMatrix id="cm" preserveAlpha="false" kernelMatrix="1 0 0 0 1 0 0 0 1">
// <set attributeName="preserveAlpha" to="true" begin="0s" dur="5s"/>
// </feConvolveMatrix>
const cm = document.getElementById('cm');
setTimeout(() => {
console.log('Basis:', cm.preserveAlpha.baseVal);
console.log('Animiert:', cm.preserveAlpha.animVal);
}, 1000);// Wichtig · Fallstricke
- Nicht mit dem Attribut verwechseln:
conv.preserveAlphaist dasSVGAnimatedBoolean-Objekt und kein boolescher Wert.if (conv.preserveAlpha)ist deshalb immer wahr. Frage stattdessenconv.preserveAlpha.baseValab. - Keine Zeichenketten-Logik:
getAttribute('preserveAlpha')liefert"false", und diese Zeichenkette ist in JavaScript truthy.baseValgibt dir dagegen einen echtenboolean. - Wenn du
baseValeinen Wert zuweist, der kein Boolean ist, wird er nach den normalen JS-Regeln umgewandelt. Zum Beispiel ergibt"false"den Werttrue. baseValbeeinflusst eine laufende Animation nicht. Für den sichtbar wirksamen Wert liest duanimVal. Dieser Wert ist schreibgeschützt.- Kompatibilität: Alle aktuellen Browser unterstützen die Eigenschaft.
externalResourcesRequired(ebenfalls einSVGAnimatedBoolean) wurde mit SVG 2 entfernt und ist in modernen Browsern nicht mehr verfügbar.