SVGFECompositeElement.k1 — Eigenschaft · JavaScript-Referenz

Signatur

SVGFECompositeElement.k1

Beschreibung

Die Eigenschaft k1 des Interfaces SVGFECompositeElement gibt ein SVGAnimatedNumber-Objekt zurück, das dem Attribut k1 des zugehörigen <feComposite>-Filterprimitivs entspricht. Der Koeffizient wird nur ausgewertet, wenn das Attribut operator den Wert "arithmetic" hat.

Beim Operator arithmetic berechnet der Browser jedes Ergebnispixel mit der Formel result = k1 · i1 · i2 + k2 · i1 + k3 · i2 + k4. Dabei sind i1 und i2 die Farbwerte der Eingaben in und in2. k1 gewichtet also das Produkt beider Eingaben. Damit lassen sich Effekte wie Multiplizieren oder Maskieren sowie eigene Überblendungen umsetzen.

Die Eigenschaft selbst ist schreibgeschützt: Das zurückgegebene Objekt lässt sich nicht ersetzen. Seine Eigenschaft baseVal kann aber gesetzt werden und ändert dann das Attribut. animVal enthält den aktuellen, gegebenenfalls durch SMIL animierten Wert und kann nur gelesen werden. Fehlt das Attribut, ist der Standardwert 0.

Rückgabewert

Typ

SVGAnimatedNumber

Beschreibung

Ein Objekt mit baseVal (lesbar und schreibbar, der Basiswert des Attributs) und animVal (nur lesbar, der aktuell animierte Wert). Fehlt das Attribut, sind beide 0.

Beispiele

k1-Wert eines vorhandenen feComposite auslesen

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

0.5 0.5

Filter per Skript erzeugen und k1 setzen

const NS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(NS, 'svg');
const filter = document.createElementNS(NS, 'filter');
filter.id = 'multiply';
const comp = document.createElementNS(NS, 'feComposite');
comp.setAttribute('in', 'SourceGraphic');
comp.setAttribute('in2', 'SourceAlpha');
comp.setAttribute('operator', 'arithmetic');

// Nur das Produkt beider Eingaben verwenden (Multiplizieren)
comp.k1.baseVal = 1;
comp.k2.baseVal = 0;
comp.k3.baseVal = 0;
comp.k4.baseVal = 0;

filter.append(comp);
svg.append(filter);
document.body.append(svg);
console.log(comp.getAttribute('k1'));

1

k1 interaktiv über einen Schieberegler steuern

// HTML: <input type="range" id="slider" min="0" max="2" step="0.1" value="1">
const comp = document.querySelector('feComposite');
const slider = document.getElementById('slider');

slider.addEventListener('input', () => {
  comp.k1.baseVal = Number(slider.value);
  console.log(`k1 = ${comp.k1.baseVal}`);
});

k1 = 1.3 (je nach Reglerstellung)

Standardwert bei fehlendem Attribut

const comp = document.createElementNS('http://www.w3.org/2000/svg', 'feComposite');
console.log(comp.hasAttribute('k1'), comp.k1.baseVal);

false 0

// Wichtig · Fallstricke

Wirkt nur bei operator="arithmetic": Bei anderen Operatoren (over, in, out, atop, xor, lighter) wird k1 ignoriert. Der Wert bleibt trotzdem lesbar.
Kein direktes Zuweisen: comp.k1 = 2 wird still ignoriert (im Strict Mode gibt es einen TypeError). Setze stattdessen comp.k1.baseVal oder nutze setAttribute('k1', …).
Farbraum und vormultiplizierte Werte: Die Formel arbeitet mit vormultiplizierten RGBA-Werten im Bereich 0–1. Die Ergebnisse werden auf diesen Bereich begrenzt. Der Farbraum hängt von color-interpolation-filters ab, Standard ist linearRGB.
Leistung: Wenn du k1 häufig änderst, etwa bei jedem input-Event, wird der gesamte Filter neu berechnet. Das kann bei großen Flächen teuer sein. Drossle die Aktualisierungen bei Bedarf mit requestAnimationFrame.
Kompatibilität: Wird in allen modernen Browsern unterstützt (Chrome, Edge, Firefox, Safari). BackgroundImage als Eingabe wird dagegen in den meisten Browsern nicht unterstützt.

Siehe auch

SVGFECompositeElement SVGFECompositeElement.k2 SVGFECompositeElement.k3 SVGFECompositeElement.k4 SVGFECompositeElement.operator SVGAnimatedNumber WorkerLocation.protocol