SVGFEDisplacementMapElement.in1 — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEDisplacementMapElement.in1

Beschreibung

Die Eigenschaft in1 der Schnittstelle SVGFEDisplacementMapElement gibt ein SVGAnimatedString-Objekt zurück. Es spiegelt das Attribut in des Filterprimitivs <feDisplacementMap> wider. Dieses Attribut legt fest, welche Grafik verschoben wird, also die Eingabe, auf die die Verschiebungskarte angewendet wird.

Als Wert erlaubt sind die Schlüsselwörter SourceGraphic, SourceAlpha, BackgroundImage, BackgroundAlpha, FillPaint und StrokePaint sowie der Name eines result-Attributs aus einem vorherigen Filterprimitiv. Die Verschiebungskarte selbst (welche Pixel wie weit verschoben werden) kommt über das zweite Attribut in2, das über die Eigenschaft in2 erreichbar ist.

Schreibgeschützt ist nur die Eigenschaft selbst, also der Verweis auf das SVGAnimatedString-Objekt. Den Attributwert kannst du über in1.baseVal lesen und setzen. in1.animVal liefert den aktuellen Wert, auch während einer SMIL-Animation. Brauchbar ist das zum Beispiel, wenn du zur Laufzeit per Skript die Filterkette umbaust, etwa um zwischen Originalgrafik und einem Zwischenergebnis umzuschalten.

Rückgabewert

Typ

SVGAnimatedString

Beschreibung

Objekt mit baseVal (Wert des in-Attributs, lesbar und schreibbar) und animVal (aktueller, eventuell animierter Wert, nur lesbar). Fehlt das Attribut, ist baseVal ein leerer String.

Beispiele

Eingabequelle auslesen

// SVG im Dokument:
// <filter id="welle">
//   <feTurbulence type="turbulence" baseFrequency="0.05" result="rauschen"/>
//   <feDisplacementMap id="dm" in="SourceGraphic" in2="rauschen" scale="20"/>
// </filter>
const dm = document.getElementById('dm');
console.log(dm.in1.baseVal);
console.log(dm.in2.baseVal);

SourceGraphic rauschen

Filter komplett per Skript erzeugen

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

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

const dm = document.createElementNS(NS, 'feDisplacementMap');
dm.in1.baseVal = 'SourceGraphic'; // setzt das Attribut in="SourceGraphic"
dm.in2.baseVal = 'karte';
dm.scale.baseVal = 30;

filter.append(turb, dm);
svg.append(filter);
document.body.append(svg);

console.log(dm.getAttribute('in'));

SourceGraphic

Eingabe zur Laufzeit umschalten

const dm = document.querySelector('feDisplacementMap');
const button = document.querySelector('#umschalten');

button.addEventListener('click', () => {
  // Zwischen Originalgrafik und Alpha-Kanal wechseln
  dm.in1.baseVal = dm.in1.baseVal === 'SourceGraphic'
    ? 'SourceAlpha'
    : 'SourceGraphic';
  console.log(`Aktuelle Eingabe: ${dm.in1.animVal}`);
});

Aktuelle Eingabe: SourceAlpha

// Wichtig · Fallstricke

Die Eigenschaft heißt in1 und nicht in, weil in in JavaScript ein reserviertes Wort (Operator) ist. Das zugehörige Attribut heißt trotzdem in, also getAttribute('in').
dm.in1 = 'SourceGraphic' hat keine Wirkung (im Strict Mode gibt es einen TypeError). Ändere stattdessen immer in1.baseVal.
Fehlt in oder ist es leer, nimmt das Primitiv beim ersten Filterprimitiv SourceGraphic als Eingabe, sonst das Ergebnis des vorherigen Primitivs. baseVal bleibt in diesem Fall trotzdem ein leerer String.
Verweist in auf einen result-Namen, den es nicht gibt, gilt die Filterreferenz als ungültig. Je nach Browser wird das Element dann gar nicht oder ohne Filter gezeichnet.
BackgroundImage und BackgroundAlpha unterstützen die gängigen Browser praktisch nicht. FillPaint und StrokePaint werden ebenfalls kaum unterstützt.
Die Eigenschaft selbst funktioniert in allen modernen Browsern. feDisplacementMap kann bei großen Flächen oder animierter Turbulenz aber viel Rechenzeit kosten.

Siehe auch

SVGFEDisplacementMapElement SVGFEDisplacementMapElement.in2 SVGFEDisplacementMapElement.scale SVGFEDisplacementMapElement.xChannelSelector SVGAnimatedString SVGFETurbulenceElement SVGFEDisplacementMapElement.result