SVGFECompositeElement.k2 — Eigenschaft · JavaScript-Referenz

Signatur

SVGFECompositeElement.k2

Beschreibung

Die schreibgeschützte Eigenschaft k2 der Schnittstelle SVGFECompositeElement gibt ein SVGAnimatedNumber-Objekt zurück. Es spiegelt das Attribut k2 des zugehörigen <feComposite>-Filterprimitivs wider.

Der Wert k2 wirkt nur, wenn operator="arithmetic" gesetzt ist. Dann berechnet der Filter jeden Ergebnispixel mit der Formel result = k1·i1·i2 + k2·i1 + k3·i2 + k4. Dabei ist i1 die Eingabe aus in und i2 die aus in2. k2 legt also fest, wie stark die erste Eingabe linear einfließt.

Schreibgeschützt ist nur die Referenz auf das Objekt, nicht der Wert selbst. Mit k2.baseVal liest und setzt du den Grundwert, und das Attribut ändert sich dabei mit. k2.animVal liefert den aktuellen Wert, auch während einer SMIL-Animation. Typische Einsatzfälle sind Überblendungen zwischen zwei Filtereingaben, Aufhellen oder Abdunkeln und interaktive Filtereffekte, die du per Skript steuerst.

Rückgabewert

Typ

SVGAnimatedNumber

Beschreibung

Objekt mit baseVal (Grundwert, les- und schreibbar, Standard 0) und animVal (aktueller Wert, nur lesbar).

Beispiele

k2-Wert auslesen

// HTML: <svg><filter id="f"><feComposite id="comp" in="SourceGraphic" in2="BackgroundImage" operator="arithmetic" k1="0" k2="0.6" k3="0.4" k4="0"/></filter></svg>
const comp = document.getElementById('comp');
console.log(comp.k2 instanceof SVGAnimatedNumber);
console.log(comp.k2.baseVal);
console.log(comp.k2.animVal);

true 0.6 0.6

Überblendung per Schieberegler steuern

// Mischt zwei Eingaben: k2 = Anteil von in, k3 = Anteil von in2
const comp = document.querySelector('feComposite');
const slider = document.querySelector('#mix'); // <input type="range" min="0" max="1" step="0.01">

slider.addEventListener('input', () => {
  const t = Number(slider.value);
  comp.k2.baseVal = 1 - t;
  comp.k3.baseVal = t;
  console.log(comp.getAttribute('k2'));
});

z. B. "0.7" bei Reglerwert 0.3

feComposite dynamisch erzeugen

const SVG_NS = 'http://www.w3.org/2000/svg';
const filter = document.createElementNS(SVG_NS, 'filter');
filter.id = 'aufhellen';
const comp = document.createElementNS(SVG_NS, 'feComposite');
comp.setAttribute('in', 'SourceGraphic');
comp.setAttribute('in2', 'SourceGraphic');
comp.operator.baseVal = SVGFECompositeElement.SVG_FECOMPOSITE_OPERATOR_ARITHMETIC;
comp.k2.baseVal = 1.2;  // Quelle leicht verstärken
comp.k4.baseVal = 0.05; // konstanter Helligkeitsversatz
filter.append(comp);
document.querySelector('svg defs').append(filter);
console.log(comp.k2.baseVal);

1.2000000476837158

// Wichtig · Fallstricke

Auf die Eigenschaft selbst kannst du nichts zuweisen: comp.k2 = 0.5 hat keine Wirkung (im Strict Mode wirft es einen TypeError). Setze stattdessen comp.k2.baseVal.
k2 wirkt nur bei operator="arithmetic". Bei anderen Operatoren wie over oder in wird der Wert ignoriert.
Intern ist der Wert ein 32-Bit-Float. Deshalb weichen Zahlen beim Auslesen leicht ab, etwa 1.2000000476837158. Vergleiche solche Werte mit einer Toleranz.
Die Ergebnisse der Formel werden auf den Bereich 0–1 begrenzt. Hohe k2-Werte führen daher schnell zu überbelichteten Bereichen. Die Berechnung arbeitet mit vormultiplizierten Farbwerten.
Das fehlende Attribut entspricht dem Wert 0. Die Eigenschaft wird von allen modernen Browsern unterstützt.

Siehe auch

SVGFECompositeElement SVGFECompositeElement.k1 SVGFECompositeElement.k3 SVGFECompositeElement.k4 SVGFECompositeElement.operator SVGAnimatedNumber WorkerNavigator.storage