Signatur
Beschreibung
Die Eigenschaft result des Interfaces SVGFEColorMatrixElement spiegelt das gleichnamige SVG-Attribut eines <feColorMatrix>-Elements wider. Über diesen Namen können nachfolgende Filterprimitive im selben <filter> das Ergebnis der Farbmatrix-Transformation über ihr Attribut in oder in2 referenzieren.
Die Eigenschaft selbst ist schreibgeschützt: Man kann ihr kein neues Objekt zuweisen. Das zurückgegebene SVGAnimatedString hat aber die beschreibbare Eigenschaft baseVal, über die sich der Name ändern lässt. animVal enthält den aktuell (ggf. durch SMIL animierten) wirksamen Wert und ist nur lesbar.
Typische Anwendungsfälle sind dynamisch erzeugte Filterketten, z. B. wenn ein Skript mehrere Primitive zusammensetzt (Graustufen → Weichzeichnen → Überblenden) und dafür eindeutige Zwischennamen vergeben muss. Fehlt das Attribut, ist baseVal ein leerer String; das Ergebnis ist dann nur implizit als Eingabe für das direkt folgende Primitiv verfügbar.
Rückgabewert
baseVal (beschreibbarer Attributwert als string) und animVal (schreibgeschützter, aktuell wirksamer Wert). Ohne gesetztes Attribut sind beide leere Strings.Beispiele
Namen eines vorhandenen feColorMatrix auslesen
// <svg><filter id="grau"><feColorMatrix id="cm" type="saturate" values="0" result="graustufen"/></filter></svg>
const cm = document.querySelector('#cm');
console.log(cm.result instanceof SVGAnimatedString);
console.log(cm.result.baseVal);
console.log(cm.result.animVal);Filterkette dynamisch aufbauen und verknüpfen
const NS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(NS, 'svg');
const filter = document.createElementNS(NS, 'filter');
filter.id = 'sepiaBlur';
const matrix = document.createElementNS(NS, 'feColorMatrix');
matrix.setAttribute('type', 'matrix');
matrix.setAttribute('values',
'0.393 0.769 0.189 0 0 0.349 0.686 0.168 0 0 0.272 0.534 0.131 0 0 0 0 0 1 0');
matrix.result.baseVal = 'sepia'; // Namen per DOM-API vergeben
const blur = document.createElementNS(NS, 'feGaussianBlur');
blur.in1.baseVal = matrix.result.baseVal; // Ergebnis referenzieren
blur.stdDeviation.baseVal = 2;
filter.append(matrix, blur);
svg.append(filter);
document.body.append(svg);
document.querySelector('img').style.filter = 'url(#sepiaBlur)';
console.log(matrix.getAttribute('result'));Schreibschutz der Eigenschaft selbst
const cm = document.createElementNS('http://www.w3.org/2000/svg', 'feColorMatrix');
console.log(JSON.stringify(cm.result.baseVal));
cm.result = 'neu'; // wird ignoriert (im Strict Mode: TypeError)
console.log(typeof cm.result);
cm.result.baseVal = 'neu'; // korrekt
console.log(cm.getAttribute('result'));// Wichtig · Fallstricke
- Nicht direkt zuweisen:
el.result = 'x'hat keine Wirkung (im Strict ModeTypeError). Immerel.result.baseValverwenden odersetAttribute('result', …). - Gültigkeitsbereich: Der Name gilt nur innerhalb desselben
<filter>-Elements. Doppelte Namen sind erlaubt; referenziert wird dann das jeweils zuletzt davor definierte Ergebnis. - Ein Verweis per
inauf einen nicht existierenden Namen wird je nach Browser alsSourceGraphicbzw. als vorheriges Ergebnis interpretiert – Tippfehler fallen daher oft nicht auf. - Die Eigenschaft stammt aus dem Mixin
SVGFilterPrimitiveStandardAttributesund existiert identisch auf allenSVGFE*Element-Interfaces. In allen modernen Browsern unterstützt; Namen sollten keine Leerzeichen enthalten.