Signatur
Beschreibung
SVGFEMorphologyElement ist die DOM-Darstellung des Filterprimitivs <feMorphology>. Das Element macht die Eingabegrafik innerhalb eines <filter> entweder dünner (operator="erode") oder dicker (operator="dilate"). So lassen sich z. B. Konturen um Text zeichnen, Schrift fetter oder magerer machen oder Masken verkleinern.
Die Schnittstelle erbt von SVGElement und bindet SVGFilterPrimitiveStandardAttributes ein. Dadurch hat sie die Eigenschaften x, y, width, height (jeweils SVGAnimatedLength) und result (SVGAnimatedString). Dazu kommen eigene Eigenschaften:
in1(SVGAnimatedString): entspricht dem Attributin, also der Eingabequelle.operator(SVGAnimatedEnumeration): Art der Operation als Konstante (SVG_MORPHOLOGY_OPERATOR_ERODE= 1,SVG_MORPHOLOGY_OPERATOR_DILATE= 2).radiusX/radiusY(SVGAnimatedNumber): die beiden Werte des Attributsradius.
Die Eigenschaften sind „animated“-Objekte. Den gesetzten Wert liest und schreibst du über baseVal. Der aktuell wirksame Wert, der auch SMIL-Animationen berücksichtigt, steht in animVal und ist schreibgeschützt. Einen öffentlichen Konstruktor gibt es nicht. Instanzen erzeugst du mit document.createElementNS("http://www.w3.org/2000/svg", "feMorphology") oder du holst sie aus vorhandenem Markup.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $in1 | SVGAnimatedString | Ergebnis des vorherigen Primitivs bzw. SourceGraphic | Eingabe des Filters, entspricht dem Attribut in (z. B. SourceGraphic, SourceAlpha oder ein result-Name). |
| $operator | SVGAnimatedEnumeration | 1 (erode) | Operation: 1 = erode (verdünnen), 2 = dilate (verdicken), 0 = unbekannt. |
| $radiusX | SVGAnimatedNumber | 0 | Horizontaler Radius, also der erste Wert von radius. |
| $radiusY | SVGAnimatedNumber | wie radiusX | Vertikaler Radius, also der zweite Wert von radius. Fehlt er, gilt derselbe Wert wie bei radiusX. |
| $result | SVGAnimatedString | Name des Ergebnisses. Über diesen Namen können spätere Primitive das Ergebnis referenzieren. | |
| $x / y / width / height | SVGAnimatedLength | 0% / 0% / 100% / 100% | Teilbereich, auf den das Primitiv wirkt. |
Rückgabewert
createElementNS() oder von DOM-Abfragen wie querySelector("feMorphology") zurückgegeben.Beispiele
Kontur-Filter per JavaScript erzeugen
const NS = "http://www.w3.org/2000/svg";
const svg = document.querySelector("svg");
const filter = document.createElementNS(NS, "filter");
filter.id = "kontur";
// Alphakanal verdicken, damit ein Rand entsteht
const morph = document.createElementNS(NS, "feMorphology");
morph.setAttribute("in", "SourceAlpha");
morph.setAttribute("operator", "dilate");
morph.setAttribute("radius", "2");
morph.setAttribute("result", "dick");
// Originalgrafik über den verdickten Rand legen
const merge = document.createElementNS(NS, "feMerge");
for (const quelle of ["dick", "SourceGraphic"]) {
const node = document.createElementNS(NS, "feMergeNode");
node.setAttribute("in", quelle);
merge.append(node);
}
filter.append(morph, merge);
svg.prepend(filter);
svg.querySelector("text").setAttribute("filter", "url(#kontur)");
console.log(morph instanceof SVGFEMorphologyElement);Eigenschaften auslesen
// <feMorphology id="m" operator="erode" radius="3 1"/>
const m = document.getElementById("m");
const isErode = m.operator.baseVal === SVGFEMorphologyElement.SVG_MORPHOLOGY_OPERATOR_ERODE;
console.log(isErode);
console.log(m.radiusX.baseVal, m.radiusY.baseVal);
console.log(m.in1.baseVal || "(Standard-Eingabe)");Radius interaktiv per Schieberegler steuern
const morph = document.querySelector("#fett feMorphology");
const slider = document.querySelector("#staerke");
slider.addEventListener("input", () => {
const r = Number(slider.value);
morph.radiusX.baseVal = r;
morph.radiusY.baseVal = r;
// Zwischen dilate und erode umschalten
morph.operator.baseVal = r > 0
? SVGFEMorphologyElement.SVG_MORPHOLOGY_OPERATOR_DILATE
: SVGFEMorphologyElement.SVG_MORPHOLOGY_OPERATOR_ERODE;
});// Wichtig · Fallstricke
Radius: Ein Radius von 0 oder ein negativer Wert schaltet den Effekt ab. Das Primitiv gibt dann die Eingabe unverändert weiter. Alte Browser haben in diesem Fall teils transparent gerendert. Soll die Grafik dünner werden, obwohl der Schieberegler negative Werte liefert, setzt du einen positiven Radius und stellst den Operator auf erode.
Performance: Der Rechenaufwand steigt mit dem Radius stark an. Große Radien auf großen Flächen oder in Animationen können Bildrate und CPU-Last deutlich verschlechtern. Nutze möglichst kleine Radien und einen eng begrenzten Filterbereich (x/y/width/height).
Werte ändern: animVal ist schreibgeschützt. Ändere Werte über baseVal oder setAttribute(). SVG-Elemente musst du mit createElementNS() und dem SVG-Namensraum anlegen. createElement(\"feMorphology\") erzeugt ein wirkungsloses HTMLUnknownElement.
Kompatibilität: Die Schnittstelle wird in allen modernen Browsern unterstützt. Bei Radien mit Nachkommastellen können sich die Ergebnisse je nach Rendering-Engine leicht unterscheiden.