SVGFEMorphologyElement.in1 — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEMorphologyElement.in1

Beschreibung

Die Eigenschaft in1 des Interfaces SVGFEMorphologyElement gibt ein SVGAnimatedString-Objekt zurück. Es steht für das in-Attribut des zugehörigen <feMorphology>-Elements. Das Attribut legt fest, welches Eingabebild das Primitiv erweitert (dilate) oder ausdünnt (erode).

Typische Werte sind die Schlüsselwörter SourceGraphic, SourceAlpha, BackgroundImage, BackgroundAlpha, FillPaint und StrokePaint. Möglich ist auch der result-Name eines vorherigen Filterprimitivs. Fehlt das Attribut, nimmt der Filter beim ersten Primitiv SourceGraphic und bei allen weiteren das Ergebnis des vorherigen Primitivs.

Schreibgeschützt ist nur die Eigenschaft in1 selbst: Man kann ihr kein neues Objekt zuweisen. Den Wert ändert man über in1.baseVal oder mit setAttribute('in', …). Der aktuell wirksame Wert, etwa während einer SMIL-Animation, steht in in1.animVal. So lassen sich Filterketten per Skript umbauen, zum Beispiel wenn eine Umrisslinie wahlweise aus dem Alphakanal oder aus einem vorherigen Zwischenergebnis entstehen soll.

Rückgabewert

Typ

SVGAnimatedString

Beschreibung

Objekt mit baseVal (änderbarer Attributwert als string) und animVal (aktuell wirksamer, schreibgeschützter Wert). Ist kein in-Attribut gesetzt, ist baseVal ein leerer String.

Beispiele

Eingabe eines feMorphology-Primitivs auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const morph = document.createElementNS(svgNS, 'feMorphology');
morph.setAttribute('in', 'SourceAlpha');
morph.setAttribute('operator', 'dilate');
morph.setAttribute('radius', '2');

console.log(morph.in1 instanceof SVGAnimatedString);
console.log(morph.in1.baseVal);
console.log(morph.in1.animVal);

true SourceAlpha SourceAlpha

Eingabe per baseVal umschalten (Umriss-Effekt)

// HTML: <svg><filter id="outline"><feMorphology id="m" in="SourceGraphic" operator="dilate" radius="3"/></filter></svg>
const morph = document.getElementById('m');

const useAlpha = (enabled) => {
  morph.in1.baseVal = enabled ? 'SourceAlpha' : 'SourceGraphic';
};

useAlpha(true);
console.log(morph.getAttribute('in'));

SourceAlpha

Filterkette verknüpfen und Standardwert prüfen

const svgNS = 'http://www.w3.org/2000/svg';
const filter = document.createElementNS(svgNS, 'filter');
const blur = document.createElementNS(svgNS, 'feGaussianBlur');
blur.setAttribute('stdDeviation', '1');
blur.setAttribute('result', 'weich');

const morph = document.createElementNS(svgNS, 'feMorphology');
console.log(JSON.stringify(morph.in1.baseVal)); // noch kein in-Attribut

morph.in1.baseVal = blur.result.baseVal; // an vorheriges Ergebnis koppeln
filter.append(blur, morph);
console.log(morph.in1.baseVal);

"" weich

// Wichtig · Fallstricke

Die DOM-Eigenschaft heißt in1, weil in in JavaScript ein reserviertes Wort ist. Das SVG-Attribut heißt trotzdem in.
Eine Zuweisung wie morph.in1 = 'SourceAlpha' hat keine Wirkung und wirft im Strict Mode einen TypeError. Ändern Sie stattdessen in1.baseVal.
Verweist in auf einen result-Namen, den es nicht gibt, wird das Attribut ignoriert: Das Primitiv nimmt dann dieselbe Eingabe wie ohne in-Attribut.
BackgroundImage und BackgroundAlpha werden von den meisten Browsern nicht unterstützt.
Große radius-Werte bei feMorphology kosten viel Rechenzeit. Bei animierten Filtern kann das die Leistung spürbar senken.
Kompatibilität: Die Eigenschaft wird in allen modernen Browsern unterstützt (Chrome, Edge, Firefox, Safari).

Siehe auch

SVGFEMorphologyElement SVGFEMorphologyElement.operator SVGFEMorphologyElement.radiusX SVGFEMorphologyElement.result SVGAnimatedString SVGFEGaussianBlurElement.in1