SVGFEBlendElement.in1 — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEBlendElement.in1

Beschreibung

Die Eigenschaft in1 des Interfaces SVGFEBlendElement liefert ein SVGAnimatedString-Objekt, das das in-Attribut des zugehörigen <feBlend>-Elements abbildet. Dieses Attribut legt die erste Eingabe des Mischvorgangs fest, also die obere Ebene. Die zweite Eingabe (untere Ebene) steht im Attribut in2 und ist über die Eigenschaft in2 erreichbar.

Als Wert kommen Schlüsselwörter wie SourceGraphic, SourceAlpha, BackgroundImage, FillPaint oder StrokePaint infrage, außerdem der result-Name eines vorherigen Filterprimitivs im selben <filter>. Ist das Attribut leer oder fehlt es, verwendet der Browser beim ersten Primitiv SourceGraphic, bei allen weiteren das Ergebnis des direkt davor stehenden Primitivs.

Schreibgeschützt ist nur die Referenz auf das SVGAnimatedString-Objekt. Den Wert selbst kannst du über in1.baseVal lesen und setzen. in1.animVal gibt den aktuellen, eventuell durch SMIL-Animation veränderten Wert zurück. Brauchbar ist das zum Beispiel, wenn ein Filter zur Laufzeit umgebaut werden soll, etwa um die Eingabequelle je nach Benutzeraktion zu wechseln.

Rückgabewert

Typ

SVGAnimatedString

Beschreibung

Objekt mit baseVal (lesbar und schreibbar, entspricht dem Wert des in-Attributs) und animVal (nur lesbar, aktueller animierter Wert).

Beispiele

Eingabe eines feBlend-Primitivs auslesen

document.body.insertAdjacentHTML('beforeend', `
  <svg width="0" height="0">
    <filter id="mix">
      <feFlood flood-color="tomato" result="farbe"/>
      <feBlend id="blend" in="SourceGraphic" in2="farbe" mode="multiply"/>
    </filter>
  </svg>`);

const blend = document.getElementById('blend');
console.log(blend.in1.baseVal);
console.log(blend.in2.baseVal);
console.log(blend.in1 instanceof SVGAnimatedString);

SourceGraphic farbe true

Eingabequelle zur Laufzeit umschalten

const blend = document.querySelector('#blend');
const button = document.createElement('button');
button.textContent = 'Eingaben tauschen';
document.body.append(button);

button.addEventListener('click', () => {
  const oben = blend.in1.baseVal;
  const unten = blend.in2.baseVal;
  // baseVal ist schreibbar – das Attribut wird mit aktualisiert
  blend.in1.baseVal = unten;
  blend.in2.baseVal = oben;
  console.log(blend.getAttribute('in'));
});

farbe

Fehlendes in-Attribut erkennen

const ns = 'http://www.w3.org/2000/svg';
const fe = document.createElementNS(ns, 'feBlend');

// Ohne Attribut ist baseVal ein leerer String
const quelle = fe.in1.baseVal || '(implizit: vorheriges Ergebnis bzw. SourceGraphic)';
console.log(quelle);

fe.setAttribute('in', 'SourceAlpha');
console.log(fe.in1.baseVal);

(implizit: vorheriges Ergebnis bzw. SourceGraphic) SourceAlpha

// Wichtig · Fallstricke

Die Eigenschaft heißt in1 und nicht in, weil in in JavaScript ein reserviertes Schlüsselwort (Operator) ist. Das zugehörige SVG-Attribut heißt trotzdem in. getAttribute('in1') liefert daher null.
Eine Zuweisung an blend.in1 selbst ist wirkungslos, im Strict Mode wirft sie einen TypeError. Ändere stattdessen immer blend.in1.baseVal.
Zeigt der Wert auf einen result-Namen, den es nicht gibt, behandeln Browser die Referenz meist wie eine fehlende Angabe. Das Ergebnis kann dann unerwartet aussehen, eine Fehlermeldung gibt es nicht.
BackgroundImage und BackgroundAlpha werden von den meisten Browsern nicht unterstützt.
Kompatibilität: Die Eigenschaft wird seit Langem von allen modernen Browsern unterstützt (Chrome, Edge, Firefox, Safari).

Siehe auch

SVGFEBlendElement SVGFEBlendElement.in2 SVGFEBlendElement.mode SVGAnimatedString SVGFECompositeElement.in1 ContentIndexEvent.id HTMLTableRowElement.align