SVGFEGaussianBlurElement.in1 — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEGaussianBlurElement.in1

Beschreibung

Die schreibgeschützte Eigenschaft in1 der Schnittstelle SVGFEGaussianBlurElement gibt ein SVGAnimatedString-Objekt zurück. Es spiegelt das in-Attribut des <feGaussianBlur>-Filterprimitivs wider. Dieses Attribut legt fest, welches Bild weichgezeichnet wird.

Mögliche Werte sind die vordefinierten Schlüsselwörter SourceGraphic, SourceAlpha, BackgroundImage, BackgroundAlpha, FillPaint und StrokePaint. Möglich ist auch der Name aus dem result-Attribut eines vorherigen Filterprimitivs im selben <filter>. Fehlt das Attribut, verwendet der erste Schritt im Filter SourceGraphic und jeder weitere Schritt das Ergebnis des direkt vorangehenden Primitivs.

Schreibgeschützt ist nur die Eigenschaft selbst. Über in1.baseVal lässt sich der Wert trotzdem lesen und setzen, das ändert das in-Attribut direkt. in1.animVal liefert den aktuellen, eventuell durch SMIL-Animation veränderten Wert. So kann man Filterketten zur Laufzeit umbauen, etwa um zwischen dem Weichzeichnen der Originalgrafik und nur ihres Alphakanals (für Schatten) umzuschalten.

Rückgabewert

Typ

SVGAnimatedString

Beschreibung

Ein Objekt mit baseVal (lesbarer und schreibbarer Attributwert als string) und animVal (schreibgeschützter, aktuell animierter Wert). Ist kein in-Attribut gesetzt, ist baseVal ein leerer String.

Beispiele

Eingabequelle auslesen

// <svg><filter id="blur"><feGaussianBlur in="SourceGraphic" stdDeviation="4"/></filter></svg>
const blur = document.querySelector('#blur feGaussianBlur');
console.log(blur.in1 instanceof SVGAnimatedString);
console.log(blur.in1.baseVal);
console.log(blur.in1.animVal);

true SourceGraphic SourceGraphic

Zwischen Unschärfe und Schatten umschalten

const blur = document.querySelector('#blur feGaussianBlur');
const toggle = document.querySelector('#shadow-toggle');

toggle.addEventListener('change', () => {
  // Nur den Alphakanal weichzeichnen → dunkler Schatten statt farbiger Unschärfe
  blur.in1.baseVal = toggle.checked ? 'SourceAlpha' : 'SourceGraphic';
  console.log(blur.getAttribute('in'));
});

SourceAlpha

Filterkette per JavaScript aufbauen

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

const offset = document.createElementNS(NS, 'feOffset');
offset.setAttribute('in', 'SourceAlpha');
offset.setAttribute('dx', '3');
offset.setAttribute('dy', '3');
offset.setAttribute('result', 'versatz');

const blur = document.createElementNS(NS, 'feGaussianBlur');
blur.in1.baseVal = 'versatz'; // Ergebnis von feOffset weichzeichnen
blur.stdDeviation.baseVal = 2;

filter.append(offset, blur);
document.querySelector('svg defs').append(filter);
console.log(blur.outerHTML);

// Wichtig · Fallstricke

Die Eigenschaft heißt in1 und nicht in, weil in in JavaScript ein reserviertes Schlüsselwort (Operator) ist. Im Markup heißt das Attribut trotzdem in.
blur.in1 = 'SourceAlpha' hat keine Wirkung (im Strict Mode gibt es einen TypeError). Setze den Wert immer über in1.baseVal oder setAttribute('in', …).
Verweist der Wert auf einen result-Namen, den es nicht gibt, behandeln die Browser das meist wie einen fehlenden Wert, also wird das vorherige Ergebnis oder SourceGraphic verwendet. Tippfehler fallen deshalb leicht nicht auf.
BackgroundImage und BackgroundAlpha werden von den meisten Browsern nicht unterstützt. FillPaint und StrokePaint sind nur eingeschränkt verfügbar.
Die Eigenschaft selbst funktioniert in allen modernen Browsern. SVG-Elemente müssen mit createElementNS und dem SVG-Namensraum erzeugt werden, sonst gibt es kein in1.

Siehe auch

SVGFEGaussianBlurElement SVGFEGaussianBlurElement.stdDeviationX SVGFEGaussianBlurElement.result SVGFEGaussianBlurElement.setStdDeviation() SVGAnimatedString SVGFEOffsetElement.in1