Signatur
Beschreibung
Die Eigenschaft in1 des Interfaces SVGFEOffsetElement steht für das in-Attribut eines <feOffset>-Filterprimitivs. Dieses Attribut legt fest, welche Eingabe verschoben wird: ein Schlüsselwort wie SourceGraphic, SourceAlpha, BackgroundImage, BackgroundAlpha, FillPaint oder StrokePaint oder das result eines vorherigen Filterprimitivs.
Der Name heißt in1 statt in, weil in in JavaScript ein reserviertes Schlüsselwort ist (Operator in). Die Eigenschaft selbst ist schreibgeschützt. Sie gibt ein SVGAnimatedString-Objekt zurück. Über baseVal lässt sich der Attributwert lesen und schreiben, animVal enthält den aktuell animierten Wert.
Gebraucht wird in1 vor allem, wenn Filterketten dynamisch aufgebaut oder umverdrahtet werden. Ein typischer Fall ist ein Schlagschatten, bei dem feOffset je nach Zustand die Alpha-Maske (SourceAlpha) oder ein weichgezeichnetes Zwischenergebnis verschiebt.
Rückgabewert
baseVal (lesbar und schreibbar, entspricht dem Attribut in) und animVal (nur lesbar, aktueller animierter Wert). Ist das Attribut nicht gesetzt, ist baseVal ein leerer String.Beispiele
Eingabe eines feOffset auslesen
// <filter id="shadow"><feOffset id="off" in="SourceAlpha" dx="4" dy="4"/></filter>
const offset = document.getElementById('off');
console.log(offset instanceof SVGFEOffsetElement);
console.log(offset.in1.baseVal);
console.log(offset.in1.animVal);Schlagschatten-Filter dynamisch erzeugen
const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');
const filter = document.createElementNS(SVG_NS, 'filter');
filter.id = 'dropShadow';
const blur = document.createElementNS(SVG_NS, 'feGaussianBlur');
blur.in1.baseVal = 'SourceAlpha';
blur.stdDeviationX.baseVal; // nur lesbar – Wert per Attribut setzen
blur.setAttribute('stdDeviation', '3');
blur.result.baseVal = 'blurred';
const offset = document.createElementNS(SVG_NS, 'feOffset');
offset.in1.baseVal = 'blurred'; // Ergebnis des Blurs verschieben
offset.dx.baseVal = 5;
offset.dy.baseVal = 5;
offset.result.baseVal = 'shadow';
const merge = document.createElementNS(SVG_NS, 'feMerge');
for (const src of ['shadow', 'SourceGraphic']) {
const node = document.createElementNS(SVG_NS, 'feMergeNode');
node.in1.baseVal = src;
merge.append(node);
}
filter.append(blur, offset, merge);
svg.querySelector('defs').append(filter);
console.log(offset.getAttribute('in'));Eingabe per Schalter umschalten
const offset = document.querySelector('#shadow feOffset');
const toggle = document.querySelector('#hardShadow');
toggle.addEventListener('change', () => {
// Harter Schatten: direkt die Alpha-Maske; weicher: Blur-Ergebnis
offset.in1.baseVal = toggle.checked ? 'SourceAlpha' : 'blurred';
console.log(`feOffset nutzt jetzt: ${offset.in1.baseVal}`);
});// Wichtig · Fallstricke
offset.in1 = 'SourceAlpha'hat keine Wirkung (im Strict Mode gibt es einenTypeError), weil die Eigenschaft schreibgeschützt ist. Ändern lässt sich der Wert nur überin1.baseValodersetAttribute('in', …).- Fehlt
in, nimmt das erste Primitiv im FilterSourceGraphic. Jedes weitere Primitiv nimmt das Ergebnis des vorherigen.baseValist dann trotzdem ein leerer String. - Verweist
inauf einresult, das es nicht gibt, fällt der Browser auf das Standardverhalten zurück. Eine Fehlermeldung gibt es nicht, was die Fehlersuche erschwert. BackgroundImage,BackgroundAlpha,FillPaintundStrokePaintunterstützen die meisten Browser kaum oder gar nicht. In der Praxis sollte man sich aufSourceGraphic,SourceAlphaund benannte Ergebnisse verlassen.- SVG-Elemente immer mit
createElementNSund dem SVG-Namensraum erzeugen. Sonst entsteht keinSVGFEOffsetElementundin1istundefined. - Die Eigenschaft wird in allen modernen Browsern unterstützt.