SVGFECompositeElement.in2 — Eigenschaft · JavaScript-Referenz

Signatur

SVGFECompositeElement.in2

Beschreibung

Die Eigenschaft in2 des Interfaces SVGFECompositeElement spiegelt das Attribut in2 eines <feComposite>-Filterprimitivs wider. Über in2 wird die zweite Eingabe der Komposition festgelegt. Die erste Eingabe steht in in (im DOM als in1). Beide werden dann mit dem Operator aus operator verknüpft, zum Beispiel over, in, out, atop, xor oder arithmetic.

Zurückgegeben wird kein einfacher String, sondern ein SVGAnimatedString-Objekt. Die Eigenschaft selbst ist schreibgeschützt, man kann ihr also kein neues Objekt zuweisen. Der Wert lässt sich aber über in2.baseVal lesen und ändern. in2.animVal enthält den aktuell animierten Wert, etwa während einer SMIL-Animation mit <animate>.

Gültige Werte sind Schlüsselwörter wie SourceGraphic, SourceAlpha, BackgroundImage, BackgroundAlpha, FillPaint und StrokePaint. Möglich ist auch der result-Name eines vorherigen Filterprimitivs innerhalb desselben <filter>. Typische Anwendungen sind Maskierungen, Schlagschatten und das dynamische Umschalten von Filtereffekten per JavaScript.

Rückgabewert

Typ

SVGAnimatedString

Beschreibung

Ein Objekt mit baseVal (lesbar und schreibbar, der Attributwert) und animVal (nur lesbar, der aktuell animierte Wert). Fehlt das Attribut, ist baseVal ein leerer String.

Beispiele

Zweite Eingabe eines feComposite auslesen

// <svg><filter id="f"><feFlood flood-color="red" result="rot"/>
//   <feComposite in="rot" in2="SourceAlpha" operator="in"/></filter></svg>
const composite = document.querySelector('#f feComposite');
console.log(composite.in2 instanceof SVGAnimatedString);
console.log(composite.in2.baseVal);
console.log(composite.in1.baseVal);

true SourceAlpha rot

Eingabe dynamisch umschalten

const composite = document.querySelector('#f feComposite');
const toggle = document.querySelector('#toggle');

toggle.addEventListener('click', () => {
  // Zwischen Alpha-Maske und vollständiger Grafik wechseln
  const aktuell = composite.in2.baseVal;
  composite.in2.baseVal = aktuell === 'SourceAlpha' ? 'SourceGraphic' : 'SourceAlpha';
  console.log('in2 ist jetzt:', composite.in2.baseVal);
  console.log(composite.getAttribute('in2')); // Attribut wurde mit geändert
});

in2 ist jetzt: SourceGraphic SourceGraphic

feComposite komplett per JavaScript erzeugen

const SVG_NS = 'http://www.w3.org/2000/svg';
const filter = document.createElementNS(SVG_NS, 'filter');
filter.id = 'maske';

const flood = document.createElementNS(SVG_NS, 'feFlood');
flood.setAttribute('flood-color', 'steelblue');
flood.setAttribute('result', 'farbe');

const comp = document.createElementNS(SVG_NS, 'feComposite');
comp.in1.baseVal = 'farbe';
comp.in2.baseVal = 'SourceGraphic';
comp.operator.baseVal = SVGFECompositeElement.SVG_FECOMPOSITE_OPERATOR_IN;

filter.append(flood, comp);
document.querySelector('svg defs').append(filter);
console.log(comp.outerHTML);

// Wichtig · Fallstricke

Eine direkte Zuweisung wie el.in2 = 'SourceAlpha' wirkt nicht, weil die Eigenschaft schreibgeschützt ist. Im strikten Modus wird ein TypeError geworfen. Ändern Sie stattdessen el.in2.baseVal.
Verweist in2 auf einen result-Namen, den es nicht gibt, wird das Primitiv so behandelt, als wäre keine Eingabe angegeben. Es kommt dann SourceGraphic bzw. das Ergebnis des vorherigen Primitivs zum Einsatz. Einen Fehler gibt es nicht.
BackgroundImage und BackgroundAlpha werden von aktuellen Browsern praktisch nicht unterstützt.
Die Eigenschaft ist in allen modernen Browsern verfügbar. Elemente müssen mit createElementNS im SVG-Namensraum erzeugt werden, sonst gibt es in2 nicht.
Das Attribut für die erste Eingabe heißt in, die DOM-Eigenschaft dazu aber in1, weil in ein reserviertes Wort ist.

Siehe auch

SVGFECompositeElement SVGFECompositeElement.in1 SVGFECompositeElement.operator SVGAnimatedString SVGFEBlendElement.in2 PerformanceScriptTiming.window SVGTextPathElement.side