SVGFECompositeElement.k3 — Eigenschaft · JavaScript-Referenz

Signatur

SVGFECompositeElement.k3

Beschreibung

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

Der Wert k3 wirkt nur, wenn der Operator arithmetic gesetzt ist. Das Ergebnis wird pro Pixel und Farbkanal so berechnet: result = k1·i1·i2 + k2·i1 + k3·i2 + k4. i1 steht für die Eingabe in, i2 für in2. k3 legt also fest, wie stark die zweite Eingabe (in2) linear ins Ergebnis eingeht.

Schreibgeschützt ist nur die Eigenschaft selbst: Man kann ihr kein neues Objekt zuweisen. Den Wert kann man trotzdem ändern, und zwar über k3.baseVal. Das ändert auch das Attribut im DOM. k3.animVal liefert den aktuellen, eventuell per SMIL animierten Wert. So lassen sich Überblend- und Mischeffekte zwischen zwei Filtereingaben per Skript steuern, etwa ein stufenloser Übergang zwischen zwei Bildern.

Rückgabewert

Typ

SVGAnimatedNumber

Beschreibung

Ein Objekt mit baseVal (änderbarer Grundwert, Standard 0) und animVal (aktueller animierter Wert, nur lesbar).

Beispiele

k3-Wert auslesen

// <svg><filter id="mix"><feComposite id="comp" in="SourceGraphic" in2="BackgroundImage" operator="arithmetic" k1="0" k2="0.5" k3="0.5" k4="0"/></filter></svg>
const comp = document.getElementById('comp');
console.log(comp.k3.baseVal);
console.log(comp.k3.animVal);

0.5 0.5

Stufenlose Überblendung per Schieberegler

const svgNS = 'http://www.w3.org/2000/svg';
const comp = document.createElementNS(svgNS, 'feComposite');
comp.setAttribute('operator', 'arithmetic');
comp.setAttribute('in', 'bildA');
comp.setAttribute('in2', 'bildB');
document.querySelector('#mixFilter').append(comp);

const slider = document.querySelector('#mix'); // <input type="range" min="0" max="1" step="0.01">
const update = () => {
  const t = Number(slider.value);
  comp.k2.baseVal = 1 - t; // Anteil von in
  comp.k3.baseVal = t;     // Anteil von in2
};
slider.addEventListener('input', update);
update();
console.log(comp.getAttribute('k3'));

"0.5" (bei Reglerwert 0.5)

Standardwert und Zuweisungsversuch

const comp = document.createElementNS('http://www.w3.org/2000/svg', 'feComposite');
console.log(comp.k3.baseVal); // Standard ist 0

comp.k3 = 2; // wird ignoriert (im Strict Mode TypeError)
console.log(comp.k3 instanceof SVGAnimatedNumber);

comp.k3.baseVal = 2;
console.log(comp.getAttribute('k3'));

0 true "2"

// Wichtig · Fallstricke

k3 wirkt nur bei operator=\"arithmetic\". Bei anderen Operatoren (over, in, xor …) wird der Wert ignoriert.
Die Eigenschaft selbst lässt sich nicht neu zuweisen. Werte immer über k3.baseVal ändern. Eine direkte Zuweisung wird still ignoriert und löst im Strict Mode einen TypeError aus.
Das Ergebnis der Formel wird auf den Bereich 0–1 begrenzt. Ist die Summe aus k2 und k3 größer als 1, wird das Bild überbelichtet und die Farben brechen ab.
Die Berechnung erfolgt mit vormultipliziertem Alpha (premultiplied). Das kann bei halbtransparenten Eingaben zu unerwarteten Farben führen.
Wird die Eigenschaft oft geändert, etwa in einer Animationsschleife, kann das teuer sein: Jede Änderung löst ein erneutes Rendern des Filters aus. Bei großen Flächen die Aktualisierung mit requestAnimationFrame drosseln.
Wird von allen modernen Browsern unterstützt. BackgroundImage als Eingabe funktioniert dagegen in den meisten Browsern nicht.

Siehe auch

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