Signatur
Beschreibung
Die Eigenschaft exponent gehört zum Interface SVGComponentTransferFunctionElement. Auf dieses Interface gehen die Elemente <feFuncR>, <feFuncG>, <feFuncB> und <feFuncA> innerhalb eines <feComponentTransfer>-Filters zurück. Sie spiegelt das SVG-Attribut exponent wider. Dieses Attribut wird nur ausgewertet, wenn type="gamma" gesetzt ist.
Bei der Gamma-Transferfunktion wird jeder Farbkanalwert C nach der Formel C' = amplitude * pow(C, exponent) + offset umgerechnet. Mit exponent steuern Sie also die Krümmung der Gammakurve. Werte größer als 1 dunkeln die Mitteltöne ab, Werte zwischen 0 und 1 hellen sie auf. Fehlt das Attribut, gilt der Standardwert 1, also eine lineare Abbildung.
Die Eigenschaft liefert keine einfache Zahl, sondern ein SVGAnimatedNumber-Objekt. Über baseVal lesen und schreiben Sie den im Attribut festgelegten Wert. animVal ist schreibgeschützt und enthält den aktuellen, gegebenenfalls per SMIL animierten Wert. Wenn Sie baseVal ändern, wird das Attribut im DOM sofort mitgeändert und der Filter neu gezeichnet. So lassen sich zum Beispiel Helligkeitsregler ohne Neuaufbau des Filters umsetzen.
Rückgabewert
baseVal (lesbar und schreibbar, number) und animVal (schreibgeschützt, number). Beide stehen für den Wert des exponent-Attributs, der Standardwert ist 1.Beispiele
Exponent eines feFuncR-Elements auslesen
const svgNS = 'http://www.w3.org/2000/svg';
const funcR = document.createElementNS(svgNS, 'feFuncR');
funcR.setAttribute('type', 'gamma');
funcR.setAttribute('exponent', '2.2');
console.log(funcR.exponent.baseVal);
console.log(funcR.exponent.animVal);Standardwert ohne gesetztes Attribut
const funcG = document.createElementNS('http://www.w3.org/2000/svg', 'feFuncG');
console.log(funcG.exponent.baseVal);
console.log(funcG.hasAttribute('exponent'));Gamma-Regler für ein Bild mit Schieberegler
// HTML:
// <svg width="0" height="0"><filter id="gamma"><feComponentTransfer>
// <feFuncR type="gamma" exponent="1"/><feFuncG type="gamma" exponent="1"/>
// <feFuncB type="gamma" exponent="1"/>
// </feComponentTransfer></filter></svg>
// <img src="foto.jpg" style="filter:url(#gamma)">
// <input type="range" id="regler" min="0.2" max="3" step="0.1" value="1">
const funcs = document.querySelectorAll('#gamma feFuncR, #gamma feFuncG, #gamma feFuncB');
const regler = document.querySelector('#regler');
regler.addEventListener('input', () => {
const wert = Number(regler.value);
funcs.forEach((fn) => {
fn.exponent.baseVal = wert; // aktualisiert auch das Attribut
});
console.log(funcs[0].getAttribute('exponent'));
});// Wichtig · Fallstricke
exponentwirkt nur beitype="gamma". Beiidentity,table,discreteoderlinearwird der Wert ignoriert, auch wenn er gesetzt ist.- Eine direkte Zuweisung wie
el.exponent = 2hat keine Wirkung, denn die Eigenschaft selbst ist schreibgeschützt. Schreiben Sie stattdessenel.exponent.baseVal = 2. - Die Elemente müssen mit
document.createElementNS()und dem SVG-Namensraum erzeugt werden. Mitdocument.createElement('feFuncR')entsteht ein unbekanntes HTML-Element ohne diese Eigenschaft. - Ungültige Attributwerte, etwa
exponent="abc", führen in der Regel zum Standardwert1. Das genaue Verhalten kann sich zwischen den Browsern leicht unterscheiden. - Kompatibilität: Die Eigenschaft wird seit vielen Jahren von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge).