SVGFEDisplacementMapElement.in2 — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEDisplacementMapElement.in2

Beschreibung

Die Eigenschaft in2 der Schnittstelle SVGFEDisplacementMapElement liefert ein SVGAnimatedString-Objekt, das dem in2-Attribut des zugehörigen <feDisplacementMap>-Filterelements entspricht. Dieses Attribut legt die Verschiebungskarte fest, also die Grafik, deren Farbkanäle bestimmen, wie weit die Pixel der Eingabe aus in verschoben werden.

Als Wert sind Schlüsselwörter wie SourceGraphic, SourceAlpha, BackgroundImage, BackgroundAlpha, FillPaint und StrokePaint möglich, außerdem der result-Name eines vorherigen Filterprimitivs, etwa eines <feTurbulence>. Welche Kanäle der Karte ausgewertet werden, steuern xChannelSelector und yChannelSelector.

Die Eigenschaft selbst ist schreibgeschützt. Du kannst ihr also kein neues Objekt zuweisen. Den Wert änderst du über in2.baseVal oder mit setAttribute('in2', …). in2.animVal gibt den aktuell animierten Wert zurück, zum Beispiel während einer SMIL-Animation.

Rückgabewert

Typ

SVGAnimatedString

Beschreibung

Ein Objekt mit baseVal (änderbarer Grundwert des Attributs in2) und animVal (schreibgeschützter, gerade animierter Wert). Fehlt das Attribut, sind beide leere Zeichenketten.

Beispiele

Verschiebungskarte auslesen

// <svg><filter id="wobble">
//   <feTurbulence baseFrequency="0.02" numOctaves="2" result="noise"/>
//   <feDisplacementMap in="SourceGraphic" in2="noise" scale="20"/>
// </filter></svg>
const dispMap = document.querySelector('#wobble feDisplacementMap');

console.log(dispMap.in2 instanceof SVGAnimatedString);
console.log(dispMap.in2.baseVal);
console.log(dispMap.in2.animVal);

true noise noise

Verschiebungskarte zur Laufzeit umschalten

const dispMap = document.querySelector('#wobble feDisplacementMap');
const toggle = document.querySelector('#toggle-map');

toggle.addEventListener('click', () => {
  // Zwischen Rausch-Textur und Alphakanal der Quelle wechseln
  dispMap.in2.baseVal = dispMap.in2.baseVal === 'noise' ? 'SourceAlpha' : 'noise';
  console.log(`Aktive Karte: ${dispMap.in2.baseVal}`);
});

Aktive Karte: SourceAlpha

Filter komplett per Skript erzeugen

const NS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');

const filter = document.createElementNS(NS, 'filter');
filter.id = 'distort';

const turb = document.createElementNS(NS, 'feTurbulence');
turb.setAttribute('baseFrequency', '0.05');
turb.setAttribute('result', 'map');

const disp = document.createElementNS(NS, 'feDisplacementMap');
disp.in1.baseVal = 'SourceGraphic';
disp.in2.baseVal = 'map';
disp.scale.baseVal = 30;

filter.append(turb, disp);
svg.append(filter);

console.log(disp.getAttribute('in2'));

map

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie el.in2 = 'noise' bleibt ohne Wirkung und wirft im Strict Mode einen TypeError. Ändere stattdessen el.in2.baseVal.
Namensfalle: Das Attribut in ist in JavaScript über in1 erreichbar, weil in ein reserviertes Wort ist. Nur für in2 stimmen Attribut- und Eigenschaftsname überein.
Verweist in2 auf einen result-Namen, den es nicht gibt, nimmt der Browser das Ergebnis des vorherigen Primitivs oder SourceGraphic als Eingabe. Einen Fehler bekommst du nicht, dadurch sind solche Tippfehler schwer zu finden.
BackgroundImage und BackgroundAlpha werden von aktuellen Browsern praktisch nicht unterstützt.
Verschiebungsfilter mit großem scale auf großen Flächen kosten viel Rechenzeit. Animierst du sie, prüfe die Leistung auf mobilen Geräten.
Die Eigenschaft funktioniert in allen modernen Browsern (Chrome, Firefox, Safari, Edge).

Siehe auch

SVGFEDisplacementMapElement SVGFEDisplacementMapElement.in1 SVGFEDisplacementMapElement.scale SVGFEDisplacementMapElement.xChannelSelector SVGFEDisplacementMapElement.yChannelSelector SVGAnimatedString SVGFETurbulenceElement