Signatur
Beschreibung
Die Eigenschaft in1 der Schnittstelle SVGFEComponentTransferElement gibt ein SVGAnimatedString-Objekt zurück. Es steht für das in-Attribut des zugehörigen <feComponentTransfer>-Filterprimitivs. Dieses Attribut legt fest, welche Eingabe der Filter verarbeitet. Das kann ein Schlüsselwort wie SourceGraphic, SourceAlpha, BackgroundImage, BackgroundAlpha, FillPaint oder StrokePaint sein, oder der result-Name eines vorherigen Filterprimitivs.
Die Eigenschaft selbst ist schreibgeschützt, Sie können ihr also kein neues Objekt zuweisen. Über in1.baseVal können Sie den Attributwert aber lesen und ändern. in1.animVal liefert den aktuellen, eventuell animierten Wert und ist nur lesbar.
Nützlich ist in1, wenn Sie Filterketten per Skript prüfen oder zur Laufzeit umbauen wollen. Ein Beispiel ist ein Umschalter, der die Farbkorrektur entweder auf die Originalgrafik oder auf das Ergebnis eines vorgeschalteten Weichzeichners anwendet.
Der Name heißt in1 statt in, weil in in JavaScript ein reserviertes Schlüsselwort ist (Operator in).
Rückgabewert
baseVal (lesbarer und schreibbarer Attributwert, string) und animVal (nur lesbarer, animierter Wert, string). Fehlt das Attribut, sind beide Werte ein leerer String.Beispiele
Eingabe eines feComponentTransfer auslesen
// HTML: <svg><filter id="f"><feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur"/>
// <feComponentTransfer id="ct" in="blur"><feFuncR type="linear" slope="1.5"/></feComponentTransfer></filter></svg>
const ct = document.getElementById('ct');
console.log(ct.in1 instanceof SVGAnimatedString);
console.log(ct.in1.baseVal);
console.log(ct.in1.animVal);Filtereingabe zur Laufzeit umschalten
const ct = document.querySelector('#f feComponentTransfer');
const toggle = document.getElementById('blurToggle');
toggle.addEventListener('change', () => {
// Farbkorrektur auf weichgezeichnetes Bild oder auf das Original anwenden
ct.in1.baseVal = toggle.checked ? 'blur' : 'SourceGraphic';
console.log(ct.getAttribute('in'));
});Filter komplett per Skript erzeugen
const NS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');
const filter = document.createElementNS(NS, 'filter');
filter.id = 'invert';
const ct = document.createElementNS(NS, 'feComponentTransfer');
ct.in1.baseVal = 'SourceGraphic'; // setzt das Attribut in="SourceGraphic"
for (const ch of ['R', 'G', 'B']) {
const fn = document.createElementNS(NS, `feFunc${ch}`);
fn.setAttribute('type', 'table');
fn.setAttribute('tableValues', '1 0'); // Farbe invertieren
ct.append(fn);
}
filter.append(ct);
svg.querySelector('defs')?.append(filter) ?? svg.prepend(filter);
document.querySelector('image').setAttribute('filter', 'url(#invert)');
console.log(ct.outerHTML.startsWith('<feComponentTransfer in="SourceGraphic"'));// Wichtig · Fallstricke
- Schreibgeschützt:
ct.in1 = 'blur'schlägt fehl (im Strict Mode mit einemTypeError). Ändern Sie stattdessenct.in1.baseValoder rufen SiesetAttribute('in', …)auf. - Leerer Wert: Fehlt
in, gibtbaseValeinen leeren String zurück. Der Filter verwendet dann das Ergebnis des vorherigen Primitivs, beim ersten PrimitivSourceGraphic. - Unbekannte Referenz: Verweist
inauf einenresult-Namen, den es nicht gibt, wird der Wert wie ein fehlendes Attribut behandelt. Der Browser meldet dabei keinen Fehler. BackgroundImageundBackgroundAlphawerden von den meisten Browsern nicht unterstützt.- Elemente müssen mit
createElementNSim SVG-Namensraum erzeugt werden. Sonst gibt es keinein1-Eigenschaft. - Kompatibilität: wird in allen aktuellen Browsern unterstützt (Chrome, Firefox, Safari, Edge).