SVGFECompositeElement.k4 — Eigenschaft · JavaScript-Referenz

Signatur

SVGFECompositeElement.k4

Beschreibung

Die Eigenschaft k4 des Interfaces SVGFECompositeElement gibt das Attribut k4 eines <feComposite>-Filterprimitivs als SVGAnimatedNumber zurück. Den aktuellen Wert lesen oder setzen Sie über baseVal. Der gerade angezeigte, möglicherweise durch SMIL animierte Wert steht in animVal.

k4 wirkt nur, wenn operator="arithmetic" gesetzt ist. Dann wird jeder Ergebnispixel nach der Formel result = k1·i1·i2 + k2·i1 + k3·i2 + k4 berechnet, wobei i1 und i2 die Farbwerte der Eingaben in und in2 sind. k4 ist also ein konstanter Versatz, der auf jeden Farbkanal und auf Alpha aufgeschlagen wird. Positive Werte hellen das Ergebnis auf und machen es deckender, negative Werte dunkeln es ab.

Typische Einsatzfälle sind Überblendungen, Aufhellungen und Effekte wie „Lichter herausarbeiten“, die Sie per JavaScript zur Laufzeit steuern, etwa über einen Schieberegler. Fehlt das Attribut, ist der Standardwert 0.

Rückgabewert

Typ

SVGAnimatedNumber

Beschreibung

Objekt mit baseVal (lesbar und schreibbar, number) und animVal (nur lesbar, number). Der Standardwert ist 0.

Beispiele

k4 auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const comp = document.createElementNS(svgNS, 'feComposite');
comp.setAttribute('operator', 'arithmetic');
comp.setAttribute('k4', '0.25');

console.log(comp.k4.baseVal);
console.log(comp.k4.animVal);

0.25 0.25

Aufhellung per Schieberegler steuern

// HTML: <input type="range" id="hell" min="-1" max="1" step="0.05" value="0">
// SVG:  <filter id="f"><feComposite id="comp" in="SourceGraphic" in2="SourceGraphic"
//         operator="arithmetic" k1="0" k2="1" k3="0" k4="0"/></filter>
const comp = document.getElementById('comp');
const slider = document.getElementById('hell');

slider.addEventListener('input', () => {
  comp.k4.baseVal = Number(slider.value);
  console.log('k4-Attribut:', comp.getAttribute('k4'));
});

k4-Attribut: 0.3 (je nach Reglerstellung)

Standardwert und Abhängigkeit vom operator

const comp = document.createElementNS('http://www.w3.org/2000/svg', 'feComposite');
console.log(comp.k4.baseVal); // kein Attribut gesetzt → 0

comp.k4.baseVal = 0.5;
console.log(comp.getAttribute('k4'));
// Ohne operator="arithmetic" hat k4 keinen sichtbaren Effekt
console.log(comp.operator.baseVal === SVGFECompositeElement.SVG_FECOMPOSITE_OPERATOR_ARITHMETIC);

0 0.5 false

// Wichtig · Fallstricke

Die Eigenschaft selbst ist nur lesbar: comp.k4 = 1 bewirkt nichts und wirft im Strict Mode einen Fehler. Setzen Sie stattdessen comp.k4.baseVal oder rufen Sie setAttribute('k4', …) auf.
k4 hat nur bei operator="arithmetic" eine Wirkung. Bei allen anderen Operatoren wird der Wert ignoriert.
Das Ergebnis wird auf den Bereich [0, 1] begrenzt. Außerdem wird k4 auch auf den Alphakanal aufgeschlagen, sodass schon Werte ab etwa 1 eine vollständig weiße, deckende Fläche erzeugen können. Transparente Bereiche werden bei positivem k4 sichtbar, weil der Filterbereich gefüllt wird.
Die Berechnung erfolgt mit vormultiplizierten Farbwerten und im Farbraum, der über color-interpolation-filters festgelegt ist (standardmäßig linearRGB). Deshalb können die Ergebnisse von der eigenen Erwartung abweichen.
Die Eigenschaft wird von allen modernen Browsern unterstützt. Komplexe Filter können beim Rendern Leistung kosten, wenn Sie den Wert häufig ändern, etwa bei jedem Animationsframe.

Siehe auch

SVGFECompositeElement SVGFECompositeElement.k1 SVGFECompositeElement.k2 SVGFECompositeElement.k3 SVGFECompositeElement.operator SVGAnimatedNumber XRFrame.session