Signatur
Beschreibung
Die Eigenschaft operator des Interfaces SVGFECompositeElement gibt an, wie ein <feComposite>-Filterprimitiv seine beiden Eingaben in und in2 miteinander verrechnet. Grundlage sind die Porter-Duff-Compositing-Operationen (over, in, out, atop, xor) sowie die Sonderform arithmetic. Bei arithmetic wird das Ergebnis mit den Koeffizienten k1 bis k4 berechnet.
Die Eigenschaft selbst ist schreibgeschützt. Sie gibt ein SVGAnimatedEnumeration-Objekt zurück. Dessen Eigenschaft baseVal enthält den im Markup gesetzten Wert als Zahl und darf geändert werden. animVal enthält den aktuell wirksamen Wert, also auch während einer SMIL-Animation. Die Zahlen entsprechen den Konstanten von SVGFECompositeElement, zum Beispiel SVGFECompositeElement.SVG_FECOMPOSITE_OPERATOR_IN (Wert 2).
Typische Einsatzfälle: Sie lesen mit operator aus, welche Compositing-Operation ein Filter gerade verwendet. Oder Sie schalten sie zur Laufzeit um, etwa für Masken- und Ausstanz-Effekte oder interaktive Filter-Editoren. Ist das Attribut nicht gesetzt, gilt der Standardwert over (1).
0–SVG_FECOMPOSITE_OPERATOR_UNKNOWN1–SVG_FECOMPOSITE_OPERATOR_OVER2–SVG_FECOMPOSITE_OPERATOR_IN3–SVG_FECOMPOSITE_OPERATOR_OUT4–SVG_FECOMPOSITE_OPERATOR_ATOP5–SVG_FECOMPOSITE_OPERATOR_XOR6–SVG_FECOMPOSITE_OPERATOR_ARITHMETIC
Rückgabewert
baseVal (schreibbar, number) und animVal (nur lesbar, number). Beide enthalten einen der Konstantenwerte 0–6.Beispiele
Aktuellen Operator auslesen
// <svg><filter id="f"><feComposite id="comp" in="SourceGraphic" in2="BackgroundImage" operator="xor"/></filter></svg>
const comp = document.getElementById('comp');
console.log(comp.operator.baseVal);
console.log(comp.operator.baseVal === SVGFECompositeElement.SVG_FECOMPOSITE_OPERATOR_XOR);Zahlenwert in Attributnamen übersetzen
const OPERATOR_NAMES = ['unknown', 'over', 'in', 'out', 'atop', 'xor', 'arithmetic'];
const describeComposite = (el) => OPERATOR_NAMES[el.operator.animVal] ?? 'unbekannt';
document.querySelectorAll('feComposite').forEach((el) => {
console.log(`${el.id || '(ohne id)'}: ${describeComposite(el)}`);
});Operator zur Laufzeit per Auswahlfeld umschalten
// <select id="op"><option value="1">over</option><option value="2">in</option><option value="3">out</option><option value="4">atop</option><option value="5">xor</option></select>
const comp = document.querySelector('#f feComposite');
const select = document.getElementById('op');
select.addEventListener('change', () => {
// baseVal ist schreibbar; das Attribut wird automatisch aktualisiert
comp.operator.baseVal = Number(select.value);
console.log(comp.getAttribute('operator'));
});Auf arithmetic umstellen und Koeffizienten setzen
const comp = document.querySelector('feComposite');
comp.operator.baseVal = SVGFECompositeElement.SVG_FECOMPOSITE_OPERATOR_ARITHMETIC;
// Überblendung: 50 % in + 50 % in2
comp.k1.baseVal = 0;
comp.k2.baseVal = 0.5;
comp.k3.baseVal = 0.5;
comp.k4.baseVal = 0;
console.log(comp.getAttribute('operator'));// Wichtig · Fallstricke
- Nicht direkt zuweisen:
el.operator = 2hat keine Wirkung, im Strict Mode wirft es einenTypeError. Ändern Sie stattdessenel.operator.baseValoder rufen Sieel.setAttribute('operator', 'in')auf. - Wenn Sie
baseValauf0(UNKNOWN) oder einen ungültigen Wert setzen, werfen Browser in der Regel einenTypeError. Prüfen Sie Werte deshalb vorher. - Die Werte sind Zahlen, keine Zeichenketten. Für die lesbare Form nutzen Sie
getAttribute('operator'). - Der in Filter Effects Level 1 ergänzte Operator
lighterist nicht zuverlässig in allen Browsern umgesetzt und hat nicht überall eine DOM-Konstante. Verlassen Sie sich darauf nur nach eigenen Tests. - Die Eingabe
BackgroundImagealsin2wird von modernen Browsern kaum unterstützt. Verwenden Sie besser benannte Zwischenergebnisse (result). - Kompatibilität:
operatorwird von allen aktuellen Browsern seit Langem unterstützt (Chrome, Edge, Firefox, Safari).