Signatur
Beschreibung
SVGFECompositeElement ist die DOM-Schnittstelle zum Element <feComposite> innerhalb eines <filter>. Das Primitiv legt zwei Eingaben (in und in2) pixelweise übereinander. Die Kombinationsregel bestimmt das Attribut operator. Zur Wahl stehen die Porter-Duff-Operatoren over, in, out, atop und xor sowie arithmetic. Bei arithmetic berechnet der Browser jedes Pixel nach der Formel result = k1·i1·i2 + k2·i1 + k3·i2 + k4.
Typische Einsatzfälle sind Masken, Innenschatten, Aussparungen (Knockout-Text), Überblendungen zwischen zwei Filterergebnissen und das Zuschneiden eines Effekts auf die Form der Ausgangsgrafik, zum Beispiel mit operator="in" und in2="SourceAlpha".
Die Schnittstelle erbt von SVGElement und bringt die Eigenschaften von SVGFilterPrimitiveStandardAttributes mit: x, y, width, height und result. Dazu kommen eigene Eigenschaften:
in1,in2(SVGAnimatedString) für die beiden Eingabenoperator(SVGAnimatedEnumeration) für die Kombinationsregelk1bisk4(SVGAnimatedNumber) als Koeffizienten der arithmetischen Formel
Alle Eigenschaften sind „animierte“ Objekte. Zum Lesen und Schreiben benutzt man .baseVal. .animVal enthält den aktuellen, möglicherweise per SMIL animierten Wert und kann nur gelesen werden.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $in1 | SVGAnimatedString | vorheriges Ergebnis bzw. SourceGraphic | Entspricht dem Attribut in. Erste Eingabe, z. B. SourceGraphic, SourceAlpha oder der result-Name eines anderen Primitivs. |
| $in2 Pflicht | SVGAnimatedString | Entspricht dem Attribut in2. Zweite Eingabe, die unter in1 liegt. |
|
| $operator | SVGAnimatedEnumeration | 1 (over) | Kombinationsregel als Zahlenkonstante: SVG_FECOMPOSITE_OPERATOR_UNKNOWN (0), OVER (1), IN (2), OUT (3), ATOP (4), XOR (5), ARITHMETIC (6). |
| $k1 | SVGAnimatedNumber | 0 | Koeffizient für i1·i2. Wird nur bei arithmetic ausgewertet. |
| $k2 | SVGAnimatedNumber | 0 | Koeffizient für i1. Wird nur bei arithmetic ausgewertet. |
| $k3 | SVGAnimatedNumber | 0 | Koeffizient für i2. Wird nur bei arithmetic ausgewertet. |
| $k4 | SVGAnimatedNumber | 0 | Konstanter Summand. Wird nur bei arithmetic ausgewertet. |
Rückgabewert
document.createElementNS('http://www.w3.org/2000/svg', 'feComposite') oder durch Abfrage eines vorhandenen <feComposite>-Elements. Einen öffentlichen Konstruktor gibt es nicht.Beispiele
Filter mit feComposite per Skript erzeugen (Schatten auf die Form zuschneiden)
const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');
const filter = document.createElementNS(SVG_NS, 'filter');
filter.id = 'innerShadow';
const blur = document.createElementNS(SVG_NS, 'feGaussianBlur');
blur.setAttribute('in', 'SourceAlpha');
blur.setAttribute('stdDeviation', '4');
blur.setAttribute('result', 'blur');
const comp = document.createElementNS(SVG_NS, 'feComposite');
comp.setAttribute('in', 'blur');
comp.setAttribute('in2', 'SourceAlpha');
comp.setAttribute('operator', 'in');
filter.append(blur, comp);
svg.querySelector('defs').append(filter);
console.log(comp instanceof SVGFECompositeElement);
console.log(comp.operator.baseVal === SVGFECompositeElement.SVG_FECOMPOSITE_OPERATOR_IN);Eingaben und Operator über die DOM-Eigenschaften lesen
// <feComposite id="mix" in="SourceGraphic" in2="bg" operator="xor"/>
const comp = document.getElementById('mix');
const names = ['unknown', 'over', 'in', 'out', 'atop', 'xor', 'arithmetic'];
console.log(comp.in1.baseVal);
console.log(comp.in2.baseVal);
console.log(names[comp.operator.baseVal]);Arithmetische Überblendung per Schieberegler steuern
// <feComposite id="blend" in="SourceGraphic" in2="textur" operator="arithmetic"/>
const blend = document.getElementById('blend');
const slider = document.querySelector('#mixRange'); // <input type="range" min="0" max="1" step="0.01">
blend.operator.baseVal = SVGFECompositeElement.SVG_FECOMPOSITE_OPERATOR_ARITHMETIC;
const update = (t) => {
// result = k2·i1 + k3·i2, also eine lineare Überblendung
blend.k1.baseVal = 0;
blend.k2.baseVal = 1 - t;
blend.k3.baseVal = t;
blend.k4.baseVal = 0;
};
slider.addEventListener('input', (e) => update(Number(e.target.value)));
update(0.5);
console.log(blend.getAttribute('k2'), blend.getAttribute('k3'));