SVGFEMergeNodeElement.in1 — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEMergeNodeElement.in1

Beschreibung

Die Eigenschaft in1 des Interfaces SVGFEMergeNodeElement gibt ein SVGAnimatedString-Objekt zurück. Es entspricht dem in-Attribut eines <feMergeNode>-Elements. Dieses Attribut legt fest, welches Zwischenergebnis ein Knoten innerhalb eines <feMerge>-Filters beisteuert. Das kann ein Standardeingang wie SourceGraphic, SourceAlpha, BackgroundImage, FillPaint oder StrokePaint sein, aber auch der Name aus dem result-Attribut einer früheren Filterstufe.

Die Eigenschaft selbst ist schreibgeschützt, das zurückgegebene Objekt aber nicht. Über in1.baseVal liest und setzt man den eigentlichen Attributwert. in1.animVal enthält den aktuellen, eventuell durch SMIL-Animation veränderten Wert und lässt sich nur lesen. Wer baseVal ändert, ändert auch das in-Attribut im DOM.

Typische Einsatzfälle sind dynamische Filter-Pipelines: Man schaltet zur Laufzeit um, welche Ebenen (z. B. Schatten, Leuchten, Originalgrafik) von <feMerge> übereinandergelegt werden, oder prüft beim Debuggen, welche Eingänge ein Merge-Knoten verwendet.

Rückgabewert

Typ

SVGAnimatedString

Beschreibung

Ein Objekt mit baseVal (lesbar und schreibbar, entspricht dem in-Attribut) und animVal (nur lesbar, animierter Wert). Fehlt das Attribut, ist baseVal ein leerer String.

Beispiele

Eingänge aller Merge-Knoten auslesen

// SVG mit Schlagschatten-Filter anlegen
document.body.insertAdjacentHTML('beforeend', `
<svg width="200" height="120">
  <filter id="schatten">
    <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
    <feOffset in="blur" dx="4" dy="4" result="versatz"/>
    <feMerge>
      <feMergeNode in="versatz"/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
  <rect x="20" y="20" width="120" height="60" fill="teal" filter="url(#schatten)"/>
</svg>`);

const knoten = document.querySelectorAll('#schatten feMergeNode');
knoten.forEach((node, i) => {
  console.log(`Knoten ${i}:`, node.in1.baseVal);
});

Knoten 0: versatz Knoten 1: SourceGraphic

Schatten zur Laufzeit ein- und ausschalten

// Setzt voraus, dass das SVG aus dem ersten Beispiel schon im Dokument steht
const ersterKnoten = document.querySelector('#schatten feMergeNode');

const schattenUmschalten = (an) => {
  // baseVal ist beschreibbar und aktualisiert das in-Attribut
  ersterKnoten.in1.baseVal = an ? 'versatz' : 'SourceGraphic';
};

schattenUmschalten(false);
console.log(ersterKnoten.getAttribute('in'));
schattenUmschalten(true);
console.log(ersterKnoten.getAttribute('in'));

SourceGraphic versatz

Merge-Knoten per Skript erzeugen

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

['SourceAlpha', 'SourceGraphic'].forEach((quelle) => {
  const node = document.createElementNS(SVG_NS, 'feMergeNode');
  node.in1.baseVal = quelle;
  merge.append(node);
});

console.log(merge.outerHTML);
console.log(merge.firstElementChild instanceof SVGFEMergeNodeElement);

<feMerge><feMergeNode in="SourceAlpha"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge> true

// Wichtig · Fallstricke

Name passt nicht zum Attribut: Das Attribut heißt in, die Eigenschaft aber in1, weil in in JavaScript ein reserviertes Wort ist. node.in gibt also undefined zurück.
Die Eigenschaft ist schreibgeschützt: node.in1 = 'blur' bewirkt nichts und wirft im Strict Mode einen Fehler. Den Wert ändert man immer über node.in1.baseVal oder setAttribute('in', …).
Keine Prüfung des Werts: Ein Verweis auf einen nicht vorhandenen result-Namen löst keinen Fehler aus. Laut Spezifikation wird der Wert dann wie ein fehlendes in-Attribut behandelt, also als Ergebnis der vorherigen Filterstufe (bzw. SourceGraphic bei der ersten Stufe).
Uneinheitliche Unterstützung: BackgroundImage, BackgroundAlpha, FillPaint und StrokePaint werden von den meisten Browsern gar nicht oder nur teilweise unterstützt. Verlassen sollte man sich nur auf SourceGraphic, SourceAlpha und eigene result-Namen.
Browser-Unterstützung: Die Eigenschaft funktioniert in allen modernen Browsern. SVG-Elemente müssen mit createElementNS und dem SVG-Namensraum erzeugt werden, sonst steht die Eigenschaft nicht zur Verfügung.

Siehe auch

SVGFEMergeNodeElement SVGFEMergeElement SVGAnimatedString SVGFEBlendElement.in1 SVGFEOffsetElement.in1 SVGFilterElement SVGImageElement.decoding