SVGFECompositeElement.in1 — Eigenschaft · JavaScript-Referenz

Signatur

SVGFECompositeElement.in1

Beschreibung

Die Eigenschaft in1 der Schnittstelle SVGFECompositeElement liefert ein SVGAnimatedString-Objekt, das das in-Attribut des zugehörigen <feComposite>-Filterprimitivs widerspiegelt. Dieses Attribut legt die erste Eingabe der Komposition fest, also das Bild, das mit der zweiten Eingabe (in2) über den gewählten operator (over, in, out, atop, xor, lighter, arithmetic) verknüpft wird.

Mögliche Werte sind die Schlüsselwörter SourceGraphic, SourceAlpha, BackgroundImage, BackgroundAlpha, FillPaint, StrokePaint oder der result-Name eines vorherigen Filterprimitivs innerhalb desselben <filter>. Ist das Attribut nicht gesetzt, verwendet der Browser beim ersten Primitiv SourceGraphic, sonst das Ergebnis des vorherigen Primitivs.

Die Eigenschaft selbst ist schreibgeschützt – Sie können ihr kein neues Objekt zuweisen. Den Wert ändern Sie über in1.baseVal (beschreibbar) oder direkt mit setAttribute("in", …). in1.animVal liefert den aktuell wirksamen, ggf. per SMIL animierten Wert. Der Name lautet in1 statt in, weil in ein reserviertes Wort in JavaScript ist.

Rückgabewert

Typ

SVGAnimatedString

Beschreibung

Objekt mit baseVal (beschreibbarer Attributwert, string) und animVal (schreibgeschützter, aktuell wirksamer Wert, string).

Beispiele

Erste Eingabe eines feComposite auslesen

document.body.insertAdjacentHTML('beforeend', `
<svg width="200" height="200">
  <filter id="f">
    <feFlood flood-color="tomato" result="flut"/>
    <feComposite id="comp" in="flut" in2="SourceGraphic" operator="in"/>
  </filter>
  <circle cx="100" cy="100" r="80" filter="url(#f)"/>
</svg>`);

const comp = document.getElementById('comp');
console.log(comp.in1 instanceof SVGAnimatedString);
console.log(comp.in1.baseVal);
console.log(comp.in1.animVal);

true flut flut

Eingabe zur Laufzeit umschalten

const comp = document.querySelector('feComposite');
const button = document.createElement('button');
button.textContent = 'Eingabe wechseln';
document.body.append(button);

button.addEventListener('click', () => {
  // baseVal ist beschreibbar und aktualisiert das in-Attribut
  comp.in1.baseVal = comp.in1.baseVal === 'flut' ? 'SourceAlpha' : 'flut';
  console.log('in =', comp.getAttribute('in'));
});

in = SourceAlpha

Standardwert bei fehlendem Attribut erkennen

const svgNS = 'http://www.w3.org/2000/svg';
const comp = document.createElementNS(svgNS, 'feComposite');

// Ohne in-Attribut ist baseVal ein leerer String
const eingabe = comp.in1.baseVal || '(Standard: SourceGraphic bzw. vorheriges Ergebnis)';
console.log(eingabe);

comp.setAttribute('in', 'SourceGraphic');
console.log(comp.in1.baseVal);

(Standard: SourceGraphic bzw. vorheriges Ergebnis) SourceGraphic

// Wichtig · Fallstricke

Nicht direkt zuweisen: comp.in1 = 'SourceAlpha' hat keine Wirkung (im strikten Modus TypeError). Verwenden Sie comp.in1.baseVal = … oder setAttribute('in', …).
Namensabweichung: Das DOM-Attribut heißt in, die JavaScript-Eigenschaft in1 – bei getAttribute also 'in' verwenden.
Ein leerer baseVal bedeutet nicht „keine Eingabe“, sondern den impliziten Standard (SourceGraphic bzw. Ergebnis des vorherigen Primitivs).
Verweist in auf einen nicht existierenden result-Namen, wird je nach Browser das vorherige Ergebnis bzw. transparentes Schwarz genutzt – Tippfehler fallen oft nicht sofort auf.
BackgroundImage/BackgroundAlpha werden von den meisten Browsern nicht unterstützt.
Kompatibilität: in allen modernen Browsern (Chrome, Firefox, Safari, Edge) seit Langem verfügbar.

Siehe auch

SVGFECompositeElement SVGFECompositeElement.in2 SVGFECompositeElement.operator SVGFECompositeElement.result SVGAnimatedString SVGFEBlendElement.in1 SVGTextPathElement.side