SVGFETileElement.in1 — Eigenschaft · JavaScript-Referenz

Signatur

SVGFETileElement.in1

Beschreibung

Die Eigenschaft in1 des Interfaces SVGFETileElement spiegelt das in-Attribut eines <feTile>-Filterprimitivs wider. Dieses Attribut gibt an, welches Eingabebild gekachelt werden soll: entweder ein Schlüsselwort wie SourceGraphic, SourceAlpha, BackgroundImage, BackgroundAlpha, FillPaint und StrokePaint oder der result-Name eines vorherigen Filterprimitivs.

Der Name lautet in1 statt in, weil in in JavaScript ein reserviertes Schlüsselwort (Operator) ist. Die Eigenschaft selbst ist schreibgeschützt: Sie liefert ein SVGAnimatedString-Objekt. Dessen baseVal kannst du aber lesen und schreiben, animVal enthält den aktuellen, eventuell animierten Wert.

Brauchbar ist das, wenn du Filterketten dynamisch umbaust, zum Beispiel wenn eine Kachel-Quelle je nach Zustand der Anwendung zwischen verschiedenen Zwischenergebnissen wechseln soll, ohne dass du die komplette Filterdefinition neu erzeugst.

Rückgabewert

Typ

SVGAnimatedString

Beschreibung

Ein Objekt mit baseVal (lesbar und schreibbar, entspricht dem Attributwert) und animVal (schreibgeschützt, aktueller animierter Wert). Ist das Attribut nicht gesetzt, liefert baseVal einen leeren String.

Beispiele

Eingabequelle eines feTile auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const filter = document.createElementNS(svgNS, 'filter');
filter.innerHTML = `
  <feFlood flood-color="teal" x="0" y="0" width="20" height="20" result="kachel"/>
  <feTile in="kachel"/>
`;

const tile = filter.querySelector('feTile');
console.log(tile instanceof SVGFETileElement);
console.log(tile.in1.baseVal);
console.log(tile.in1.animVal);

true kachel kachel

Kachel-Quelle dynamisch umschalten

// Voraussetzung: <svg> mit <filter id="muster"> im Dokument,
// enthält zwei Primitive mit result="punkte" und result="streifen" sowie ein <feTile>
const tile = document.querySelector('#muster feTile');

const setzeMuster = (name) => {
  tile.in1.baseVal = name; // ändert das in-Attribut
  console.log(tile.getAttribute('in'));
};

setzeMuster('streifen');
setzeMuster('punkte');

streifen punkte

Fehlendes Attribut erkennen

const tile = document.createElementNS('http://www.w3.org/2000/svg', 'feTile');

// Ohne in-Attribut wird das Ergebnis des vorherigen Primitivs
// bzw. SourceGraphic verwendet
const quelle = tile.in1.baseVal || '(implizit: vorheriges Ergebnis / SourceGraphic)';
console.log(quelle);

(implizit: vorheriges Ergebnis / SourceGraphic)

// Wichtig · Fallstricke

Nicht direkt zuweisen: tile.in1 = 'x' hat keine Wirkung, im Strict Mode wirft es sogar einen TypeError. Ändere stattdessen tile.in1.baseVal oder rufe setAttribute('in', …) auf.
Verweist in auf einen result-Namen, den es nicht gibt, behandeln Browser das so, als ob das Attribut fehlt, oder sie brechen den Filter ab. Einen Fehler in der Konsole gibt es in der Regel nicht.
BackgroundImage und BackgroundAlpha werden von den meisten Browsern nicht unterstützt.
Elemente in SVG musst du mit document.createElementNS() und dem SVG-Namespace erzeugen. Mit createElement() bekommst du kein SVGFETileElement.
Kompatibilität: Die Eigenschaft wird von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge).

Siehe auch

SVGFETileElement SVGAnimatedString SVGFEBlendElement.in1 SVGFEOffsetElement.in1 SVGFilterElement HTMLQuoteElement.cite HTMLStyleElement.type