SVGFEDropShadowElement.in1 — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEDropShadowElement.in1

Beschreibung

Die Eigenschaft in1 der Schnittstelle SVGFEDropShadowElement gibt ein SVGAnimatedString-Objekt zurück. Dieses Objekt spiegelt das in-Attribut des <feDropShadow>-Filterprimitivs wider. Das Attribut legt fest, welche Eingabe der Schlagschatten verarbeitet, zum Beispiel SourceGraphic, SourceAlpha oder das Ergebnis (result) eines vorherigen Filterprimitivs.

Schreibgeschützt ist nur die Eigenschaft selbst: Man kann ihr kein neues Objekt zuweisen. Über in1.baseVal lässt sich der Attributwert aber lesen und ändern. in1.animVal liefert den aktuellen Wert, auch während einer SMIL-Animation.

Die Eigenschaft ist praktisch, wenn Filterketten dynamisch umgebaut werden sollen. Dann kann der Schatten per Skript zwischen der Originalgrafik und einem Zwischenergebnis wie einem weichgezeichneten oder eingefärbten Bild umschalten, ohne dass man mit setAttribute() arbeiten muss.

Rückgabewert

Typ

SVGAnimatedString

Beschreibung

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

Beispiele

Eingabe des Schlagschattens auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
svg.innerHTML = `
  <filter id="schatten">
    <feDropShadow in="SourceGraphic" dx="4" dy="4" stdDeviation="2" />
  </filter>`;
document.body.append(svg);

const drop = svg.querySelector('feDropShadow');
console.log(drop.in1 instanceof SVGAnimatedString);
console.log(drop.in1.baseVal);
console.log(drop.in1.animVal);

true SourceGraphic SourceGraphic

Eingabe per Skript auf ein Zwischenergebnis umschalten

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
svg.innerHTML = `
  <filter id="f">
    <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="weich" />
    <feDropShadow in="SourceGraphic" dx="3" dy="3" />
  </filter>`;
document.body.append(svg);

const drop = svg.querySelector('feDropShadow');
// Schatten soll nun auf dem weichgezeichneten Ergebnis basieren
drop.in1.baseVal = 'weich';
console.log(drop.getAttribute('in'));

weich

Fehlendes in-Attribut erkennen

const drop = document.createElementNS('http://www.w3.org/2000/svg', 'feDropShadow');
const eingabe = drop.in1.baseVal || '(Standard: vorheriges Ergebnis bzw. SourceGraphic)';
console.log(eingabe);

(Standard: vorheriges Ergebnis bzw. SourceGraphic)

// Wichtig · Fallstricke

Der Name lautet in1 und nicht in, weil in in JavaScript ein reserviertes Wort bzw. Operator ist. Das Attribut im Markup heißt trotzdem in.
drop.in1 = 'SourceAlpha' hat keine Wirkung (im Strict Mode gibt es einen TypeError). Ändern muss man stattdessen in1.baseVal.
Fehlt das Attribut, ist baseVal ein leerer String. Der Browser verwendet dann das Ergebnis des vorherigen Primitivs oder, beim ersten Primitiv, SourceGraphic.
Verweist der Wert auf ein nicht vorhandenes result, fällt der Browser meist ebenfalls auf die Standardeingabe zurück. Eine Fehlermeldung gibt es nicht.
feDropShadow gehört zu Filter Effects Level 1 und wird von allen aktuellen Browsern unterstützt. Der Internet Explorer unterstützt es nicht.

Siehe auch

SVGFEDropShadowElement SVGAnimatedString SVGFEDropShadowElement.dx SVGFEDropShadowElement.dy SVGFEDropShadowElement.setStdDeviation() SVGFEGaussianBlurElement.in1 WorkerNavigator.permissions