Signatur
Beschreibung
Die Eigenschaft in1 gibt ein SVGAnimatedString-Objekt zurück, das den Wert des in-Attributs eines <feColorMatrix>-Filterprimitivs abbildet. Das Attribut legt fest, welche Eingabe die Farbmatrix bearbeitet. Das kann ein Schlüsselwort wie SourceGraphic, SourceAlpha, BackgroundImage, FillPaint oder StrokePaint sein. Es kann aber auch der result-Name eines vorherigen Filterprimitivs sein.
Der Name lautet in1 statt in, weil in in JavaScript ein reserviertes Wort ist. Schreibgeschützt ist nur die Eigenschaft selbst. Das zurückgegebene Objekt lässt sich trotzdem ändern: Über in1.baseVal liest und setzt man den Attributwert. in1.animVal liefert den aktuell animierten Wert.
Die Eigenschaft ist nützlich, wenn Filterketten dynamisch umgebaut werden sollen. Ein Beispiel: Eine Farbmatrix wird per Skript zwischen dem Originalbild und dem Ergebnis eines Weichzeichners umgeschaltet, ohne dass der Filter neu erzeugt werden muss.
Rückgabewert
baseVal (Attributwert, les- und schreibbar) und animVal (animierter Wert, nur lesbar). Fehlt das Attribut, ist baseVal ein leerer String.Beispiele
Eingabe einer Farbmatrix auslesen
// <filter id="grau"><feColorMatrix id="cm" in="SourceGraphic" type="saturate" values="0"/></filter>
const matrix = document.getElementById('cm');
console.log(matrix.in1.baseVal);
console.log(matrix.in1 instanceof SVGAnimatedString);Eingabe dynamisch auf ein anderes Filterergebnis umschalten
// Filter per Skript aufbauen
const NS = 'http://www.w3.org/2000/svg';
const filter = document.createElementNS(NS, 'filter');
filter.id = 'effekt';
const blur = document.createElementNS(NS, 'feGaussianBlur');
blur.setAttribute('stdDeviation', '3');
blur.setAttribute('result', 'weich');
const matrix = document.createElementNS(NS, 'feColorMatrix');
matrix.setAttribute('type', 'hueRotate');
matrix.setAttribute('values', '90');
matrix.in1.baseVal = 'weich'; // Farbmatrix auf das Blur-Ergebnis anwenden
filter.append(blur, matrix);
document.querySelector('svg defs').append(filter);
console.log(matrix.getAttribute('in'));Per Checkbox zwischen Original und Weichzeichner wechseln
const matrix = document.querySelector('#effekt feColorMatrix');
const toggle = document.querySelector('#blurToggle');
toggle.addEventListener('change', () => {
matrix.in1.baseVal = toggle.checked ? 'weich' : 'SourceGraphic';
console.log(`Eingabe: ${matrix.in1.baseVal}`);
});// Wichtig · Fallstricke
- Eine direkte Zuweisung wie
el.in1 = 'SourceAlpha'hat keine Wirkung, weil die Eigenschaft schreibgeschützt ist. Im Strict Mode wird sogar einTypeErrorausgelöst. Setzen Sie stattdessenel.in1.baseValoder nutzen SiesetAttribute('in', …). - Fehlt
inoder ist es leer, gilt beim ersten PrimitivSourceGraphicals Eingabe. Bei allen weiteren Primitiven ist es das Ergebnis des vorherigen Primitivs.baseValbleibt in diesem Fall trotzdem ein leerer String. - Verweist
inauf einenresult-Namen, den es nicht gibt, verhält sich der Filter so, als wäre kein Attribut angegeben. BackgroundImageundBackgroundAlphawerden von den meisten Browsern nicht unterstützt.- Die Eigenschaft selbst wird von allen modernen Browsern unterstützt.