SVGFEMorphologyElement.operator — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEMorphologyElement.operator

Beschreibung

Die Eigenschaft operator des Interfaces SVGFEMorphologyElement spiegelt das Attribut operator eines <feMorphology>-Elements wider. Dieses Attribut legt fest, ob der Filter die Grafik ausdünnt (erode) oder verdickt (dilate). Typische Einsatzzwecke sind Umrisse um Text, Konturen um Icons oder „fettere“ bzw. „dünnere“ Darstellungen ohne andere Schrift.

Der Wert ist kein einfacher String, sondern ein SVGAnimatedEnumeration-Objekt. Über baseVal liest bzw. setzt man den eigentlichen Attributwert als Zahl, über animVal den aktuell (ggf. durch SMIL animierten) Wert. Die Zahlen entsprechen den Konstanten des Interfaces:

SVGFEMorphologyElement.SVG_MORPHOLOGY_OPERATOR_UNKNOWN = 0
SVGFEMorphologyElement.SVG_MORPHOLOGY_OPERATOR_ERODE = 1
SVGFEMorphologyElement.SVG_MORPHOLOGY_OPERATOR_DILATE = 2

„Schreibgeschützt“ bezieht sich nur auf die Eigenschaft selbst: Man kann operator kein neues Objekt zuweisen, operator.baseVal ist aber beschreibbar und ändert das zugehörige Attribut im DOM.

Rückgabewert

Typ

SVGAnimatedEnumeration

Beschreibung

Objekt mit baseVal (beschreibbar, Zahl 0–2) und animVal (schreibgeschützt, aktuell wirksamer Wert). Fehlt das Attribut, ist der Wert 1 (erode).

Beispiele

Operator eines vorhandenen Filters auslesen

// HTML: <svg><filter id="outline"><feMorphology operator="dilate" radius="2"/></filter></svg>
const morph = document.querySelector('#outline feMorphology');

const names = {
  [SVGFEMorphologyElement.SVG_MORPHOLOGY_OPERATOR_UNKNOWN]: 'unknown',
  [SVGFEMorphologyElement.SVG_MORPHOLOGY_OPERATOR_ERODE]: 'erode',
  [SVGFEMorphologyElement.SVG_MORPHOLOGY_OPERATOR_DILATE]: 'dilate'
};

console.log(morph.operator.baseVal);
console.log(names[morph.operator.baseVal]);

2 dilate

Filter per Skript erzeugen und Standardwert prüfen

const SVG_NS = 'http://www.w3.org/2000/svg';
const morph = document.createElementNS(SVG_NS, 'feMorphology');

// Ohne Attribut gilt der Standard "erode"
console.log(morph.operator.baseVal === SVGFEMorphologyElement.SVG_MORPHOLOGY_OPERATOR_ERODE);

// Über baseVal umstellen – das Attribut wird mitgeändert
morph.operator.baseVal = SVGFEMorphologyElement.SVG_MORPHOLOGY_OPERATOR_DILATE;
console.log(morph.getAttribute('operator'));

true dilate

Kontur per Button zwischen dünn und dick umschalten

// HTML: <button id="toggle">Umschalten</button>
// <svg><filter id="fx"><feMorphology id="morph" operator="erode" radius="1"/></filter>
// <text x="10" y="40" filter="url(#fx)" font-size="32">Hallo</text></svg>
const morph = document.getElementById('morph');
const { SVG_MORPHOLOGY_OPERATOR_ERODE: ERODE, SVG_MORPHOLOGY_OPERATOR_DILATE: DILATE } = SVGFEMorphologyElement;

document.getElementById('toggle').addEventListener('click', () => {
  const op = morph.operator;
  op.baseVal = op.baseVal === ERODE ? DILATE : ERODE;
  console.log('Aktiv:', morph.getAttribute('operator'));
});

Aktiv: dilate

// Wichtig · Fallstricke

Zahl statt String: operator.baseVal liefert 1 oder 2, nicht "erode"/"dilate". Wer mit Strings arbeiten will, nutzt getAttribute('operator') bzw. setAttribute().
Keine direkte Zuweisung: morph.operator = 2 hat keine Wirkung (bzw. wirft im Strict Mode einen TypeError); immer baseVal setzen.
Das Setzen von baseVal auf 0 (UNKNOWN) oder ungültige Werte wirft in manchen Browsern einen TypeError bzw. wird ignoriert.
Elemente müssen mit createElementNS('http://www.w3.org/2000/svg', …) erzeugt werden, sonst existiert die Eigenschaft nicht.
Große radius-Werte in Kombination mit dilate sind rechenintensiv – bei Animationen auf Performance achten.
Kompatibilität: in allen modernen Browsern (Chrome, Firefox, Safari, Edge) seit Langem unterstützt.

Siehe auch

SVGFEMorphologyElement SVGFEMorphologyElement.radiusX SVGFEMorphologyElement.radiusY SVGFEMorphologyElement.in1 SVGAnimatedEnumeration SVGFilterElement