SVGFEBlendElement.in2 — Eigenschaft · JavaScript-Referenz

Signatur

get SVGFEBlendElement.in2

Beschreibung

Die schreibgeschützte Eigenschaft in2 des Interfaces SVGFEBlendElement gibt ein SVGAnimatedString-Objekt zurück. Es spiegelt das in2-Attribut des <feBlend>-Filterprimitivs wider. <feBlend> kombiniert zwei Eingabebilder über einen Mischmodus (mode, z. B. multiply oder screen). in ist dabei die obere Ebene, in2 die untere.

Als Wert erlaubt in2 entweder ein vordefiniertes Schlüsselwort (SourceGraphic, SourceAlpha, BackgroundImage, BackgroundAlpha, FillPaint, StrokePaint) oder den result-Namen eines früheren Filterprimitivs im selben <filter>.

„Schreibgeschützt“ heißt hier nur: Man kann der Eigenschaft kein neues Objekt zuweisen. Über in2.baseVal lässt sich der Attributwert trotzdem lesen und ändern. in2.animVal liefert den aktuellen Wert, gegebenenfalls nach einer SMIL-Animation. So kann man die Eingaben eines Filters zur Laufzeit per Skript umverdrahten, etwa um zwischen verschiedenen Hintergrundebenen zu wechseln.

Rückgabewert

Typ

SVGAnimatedString

Beschreibung

Ein Objekt mit baseVal (les- und schreibbarer Attributwert als string) und animVal (schreibgeschützter, aktuell animierter Wert). Fehlt das Attribut, ist baseVal ein leerer String.

Beispiele

Zweite Eingabe eines feBlend-Elements auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
svg.innerHTML = `
  <filter id="mix">
    <feFlood flood-color="orange" result="flaeche"/>
    <feBlend in="SourceGraphic" in2="flaeche" mode="multiply"/>
  </filter>`;
document.body.append(svg);

const blend = svg.querySelector('feBlend');
console.log(blend.in2.baseVal);
console.log(blend.in2.animVal);

flaeche flaeche

Eingabe zur Laufzeit umschalten

// Zwischen zwei vorbereiteten Hintergründen wechseln
const blend = document.querySelector('#mix feBlend');
const button = document.querySelector('#toggle');

button.addEventListener('click', () => {
  const aktuell = blend.in2.baseVal;
  blend.in2.baseVal = aktuell === 'flaeche' ? 'verlauf' : 'flaeche';
  console.log(`in2 ist jetzt: ${blend.in2.baseVal}`);
  // Das Attribut wird automatisch synchronisiert
  console.log(blend.getAttribute('in2'));
});

in2 ist jetzt: verlauf verlauf

Schreibschutz der Eigenschaft selbst

'use strict';
const blend = document.createElementNS('http://www.w3.org/2000/svg', 'feBlend');
console.log(blend.in2.baseVal === ''); // Attribut nicht gesetzt

try {
  blend.in2 = 'SourceAlpha'; // Zuweisung an das Objekt selbst
} catch (e) {
  console.log(e instanceof TypeError);
}

blend.in2.baseVal = 'SourceAlpha'; // richtig
console.log(blend.getAttribute('in2'));

true true SourceAlpha

// Wichtig · Fallstricke

Nicht direkt zuweisen: blend.in2 = '…' hat keine Wirkung. Im Strict Mode wirft die Zuweisung einen TypeError. Ändern Sie stattdessen blend.in2.baseVal oder rufen Sie setAttribute('in2', …) auf.
Standardwert: Fehlt in2, verwendet der Browser für das erste Primitiv SourceGraphic, sonst das Ergebnis des vorherigen Primitivs. baseVal bleibt in diesem Fall trotzdem ein leerer String.
Verweist in2 auf einen nicht vorhandenen result-Namen, behandeln Browser die Eingabe wie einen fehlenden Wert. Das kann zu unerwarteten Ergebnissen führen, ohne dass eine Fehlermeldung erscheint.
BackgroundImage und BackgroundAlpha werden von den meisten Browsern nicht unterstützt. FillPaint und StrokePaint werden nur eingeschränkt unterstützt.
Die Eigenschaft selbst wird von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge).

Siehe auch

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