Signatur
Beschreibung
Die Eigenschaft in1 des Interfaces SVGFEConvolveMatrixElement steht für das in-Attribut eines <feConvolveMatrix>-Filterprimitivs. Dieses Attribut legt fest, welches Eingangsbild die Faltungsmatrix bearbeitet. Das kann ein Schlüsselwort wie SourceGraphic, SourceAlpha, BackgroundImage, FillPaint oder StrokePaint sein, aber auch der result-Name eines vorherigen Filterprimitivs.
Der Rückgabewert ist ein SVGAnimatedString-Objekt. Über baseVal liest und setzt man den im Markup hinterlegten Wert. animVal enthält den aktuellen, eventuell durch SMIL-Animation veränderten Wert und lässt sich nur lesen. Nur lesbar ist also allein die Eigenschaft selbst, also die Objektreferenz. Den Wert kann man über baseVal trotzdem ändern.
Typische Einsatzfälle: Filterketten dynamisch umbauen, zum Beispiel einen Schärfe- oder Kantenfilter wahlweise auf das Originalbild oder auf ein zuvor weichgezeichnetes Zwischenergebnis anwenden. Außerdem lassen sich damit Filterdefinitionen per Skript prüfen.
Rückgabewert
baseVal (lesbar und schreibbar, entspricht dem in-Attribut) und animVal (nur lesbar, animierter Wert). Fehlt das Attribut, ist baseVal ein leerer String.Beispiele
Eingangsquelle auslesen
document.body.insertAdjacentHTML('beforeend', `
<svg width="0" height="0">
<filter id="schaerfen">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" result="weich"/>
<feConvolveMatrix id="matrix" in="weich" order="3"
kernelMatrix="0 -1 0 -1 5 -1 0 -1 0"/>
</filter>
</svg>`);
const matrix = document.getElementById('matrix');
console.log(matrix.in1 instanceof SVGAnimatedString);
console.log(matrix.in1.baseVal);
console.log(matrix.in1.animVal);Eingang dynamisch umschalten
const matrix = document.querySelector('feConvolveMatrix');
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
document.body.append(checkbox);
// Je nach Checkbox: Original oder weichgezeichnetes Zwischenergebnis schärfen
checkbox.addEventListener('change', () => {
matrix.in1.baseVal = checkbox.checked ? 'SourceGraphic' : 'weich';
console.log('Neuer Eingang:', matrix.getAttribute('in'));
});Fehlendes in-Attribut erkennen
const svgNS = 'http://www.w3.org/2000/svg';
const conv = document.createElementNS(svgNS, 'feConvolveMatrix');
// Ohne in-Attribut: leerer String, dann gilt das vorherige Ergebnis bzw. SourceGraphic
const quelle = conv.in1.baseVal || '(implizit: vorheriges Ergebnis / SourceGraphic)';
console.log(quelle);
conv.setAttribute('in', 'SourceAlpha');
console.log(conv.in1.baseVal);// Wichtig · Fallstricke
- Die Eigenschaft heißt
in1und nichtin, denninist in JavaScript ein reserviertes Operator-Schlüsselwort. Im Markup heißt das Attribut aber weiterhinin. - Eine direkte Zuweisung wie
el.in1 = 'SourceGraphic'hat keine Wirkung, weil die Eigenschaft nur lesbar ist. Im Strict Mode wird dabei einTypeErrorgeworfen. Ändern lässt sich der Wert überel.in1.baseValodersetAttribute('in', …). - Verweist der Wert auf ein
result, das es nicht gibt, verwendet der Browser das Ergebnis des vorherigen Primitivs. Beim ersten Primitiv ist dasSourceGraphic. Es kommt zu keiner Fehlermeldung. BackgroundImageundBackgroundAlphawerden von den meisten Browsern nicht unterstützt.- Die Eigenschaft selbst wird von allen modernen Browsern unterstützt. Faltungsfilter mit großen Kerneln können aber viel Rechenzeit kosten, besonders bei Animationen.