Signatur
Beschreibung
Die Eigenschaft result des Interfaces SVGFEConvolveMatrixElement spiegelt das SVG-Attribut result des Elements <feConvolveMatrix> wider. Über diesen Namen kann das Ergebnis der Faltung (z. B. Schärfen, Weichzeichnen, Kantenerkennung) von nachfolgenden Filterprimitiven im selben <filter> über deren in- bzw. in2-Attribut weiterverwendet werden.
Die Eigenschaft selbst ist schreibgeschützt: Sie liefert ein SVGAnimatedString-Objekt. Den aktuellen Wert liest und ändert man über result.baseVal; result.animVal enthält den (ggf. durch SMIL-Animation veränderten) aktuell wirksamen Wert und ist nur lesbar.
Typische Einsatzfälle sind das dynamische Aufbauen oder Umverdrahten von Filterketten per JavaScript, etwa wenn man eine Kantenerkennung mit <feComposite> oder <feMerge> mit dem Originalbild kombinieren will. Ist kein result-Attribut gesetzt, ist baseVal ein leerer String; das Ergebnis steht dann nur dem unmittelbar folgenden Primitiv als implizite Eingabe zur Verfügung.
Rückgabewert
baseVal (lesbar/schreibbar, entspricht dem Attribut result) und animVal (nur lesbar, aktuell animierter Wert).Beispiele
Result-Namen auslesen
// HTML:
// <svg width="0" height="0">
// <filter id="schaerfen">
// <feConvolveMatrix id="conv" order="3"
// kernelMatrix="0 -1 0 -1 5 -1 0 -1 0" result="geschaerft" />
// </filter>
// </svg>
const conv = document.getElementById('conv');
console.log(conv.result.baseVal);
console.log(conv.result.animVal);Result-Namen per JavaScript setzen und weiterverwenden
const SVG_NS = 'http://www.w3.org/2000/svg';
const filter = document.createElementNS(SVG_NS, 'filter');
filter.id = 'kanten';
const conv = document.createElementNS(SVG_NS, 'feConvolveMatrix');
conv.setAttribute('order', '3');
conv.setAttribute('kernelMatrix', '-1 -1 -1 -1 8 -1 -1 -1 -1');
conv.result.baseVal = 'kantenBild'; // setzt das Attribut result
const merge = document.createElementNS(SVG_NS, 'feMerge');
for (const quelle of ['SourceGraphic', conv.result.baseVal]) {
const node = document.createElementNS(SVG_NS, 'feMergeNode');
node.setAttribute('in', quelle);
merge.append(node);
}
filter.append(conv, merge);
document.querySelector('svg').append(filter);
console.log(conv.getAttribute('result'));Filterkette auf Konsistenz prüfen
// Findet in-Referenzen, zu denen kein result existiert
const pruefeFilter = (filter) => {
const namen = new Set(
[...filter.children]
.map((el) => el.result?.baseVal)
.filter(Boolean)
);
const standard = ['SourceGraphic', 'SourceAlpha', 'BackgroundImage',
'BackgroundAlpha', 'FillPaint', 'StrokePaint'];
return [...filter.querySelectorAll('[in], [in2]')]
.flatMap((el) => [el.getAttribute('in'), el.getAttribute('in2')])
.filter((ref) => ref && !namen.has(ref) && !standard.includes(ref));
};
console.log(pruefeFilter(document.getElementById('kanten')));// Wichtig · Fallstricke
- Nicht direkt zuweisen:
conv.result = 'x'hat keine Wirkung (bzw. wirft im Strict Mode einenTypeError). Immerconv.result.baseValverwenden. animValist nur lesbar; Schreibversuche werden ignoriert.- Result-Namen gelten nur innerhalb desselben
<filter>-Elements. Verweist eininauf einen unbekannten Namen, wird laut Spezifikation das Ergebnis des vorherigen Primitivs (bzw.SourceGraphic) verwendet – Fehler fallen daher oft nicht sofort auf. - Doppelte Namen sind erlaubt; spätere Primitive beziehen sich dann auf das zuletzt davor definierte Ergebnis gleichen Namens.
- Elemente müssen mit
createElementNSim SVG-Namensraum erzeugt werden, sonst fehlt die Eigenschaft. - Kompatibilität: In allen modernen Browsern unterstützt; die Eigenschaft ist über das Mixin
SVGFilterPrimitiveStandardAttributesauf allen Filterprimitiven verfügbar.