Signatur
Beschreibung
SVGFEColorMatrixElement ist die DOM-Schnittstelle des Filterprimitivs <feColorMatrix>. Das Element steht innerhalb eines <filter> und rechnet die RGBA-Werte jedes Pixels der Eingabegrafik mit einer Farbmatrix um. So baut man Graustufen-, Sepia- und Duotone-Effekte, ändert Sättigung oder Farbton oder macht aus Helligkeit Transparenz, und zwar ohne Canvas und ohne Neuberechnung in JavaScript.
Die Schnittstelle erbt von SVGElement und bringt die Standard-Attribute für Filterprimitive mit (x, y, width, height, result). Dazu kommen drei eigene, animierbare Eigenschaften:
in1(SVGAnimatedString): gibt das Attributinwieder, also die Eingabequelle, z. B.SourceGraphicoder denresult-Namen eines vorherigen Primitivs.type(SVGAnimatedEnumeration): gibt das Attributtypewieder, als Zahl gemäß den Konstanten unten.values(SVGAnimatedNumberList): gibt das Attributvalueswieder, also die Matrix bzw. den einzelnen Wert.
Konstanten: SVG_FECOLORMATRIX_TYPE_UNKNOWN (0), SVG_FECOLORMATRIX_TYPE_MATRIX (1), SVG_FECOLORMATRIX_TYPE_SATURATE (2), SVG_FECOLORMATRIX_TYPE_HUEROTATE (3), SVG_FECOLORMATRIX_TYPE_LUMINANCETOALPHA (4). Jede animierte Eigenschaft hat ein baseVal (der im Markup gesetzte Wert, meist beschreibbar) und ein animVal (der aktuelle Wert während einer SMIL-Animation, nur lesbar).
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $in | string | SourceGraphic (bzw. Ergebnis des vorherigen Primitivs) | Element-Attribut, im DOM als in1 verfügbar. Eingabe des Filters: SourceGraphic, SourceAlpha oder ein result-Name. |
| $type | "matrix" | "saturate" | "hueRotate" | "luminanceToAlpha" | matrix | Element-Attribut, im DOM als type verfügbar (Zahlenwert 1–4). Legt fest, wie values gelesen wird. |
| $values | string (Zahlenliste) | Einheitsmatrix bzw. 1 (saturate) bzw. 0 (hueRotate) | Element-Attribut, im DOM als values verfügbar. Bei matrix 20 Zahlen (5 Spalten × 4 Zeilen), bei saturate ein Wert von 0 bis 1, bei hueRotate ein Winkel in Grad, bei luminanceToAlpha wird es nicht verwendet. |
| $result | string | Geerbtes Attribut (SVGAnimatedString): Name, über den spätere Primitive dieses Ergebnis als in nutzen können. |
Beispiele
Graustufenfilter per JavaScript erzeugen und anwenden
const SVG_NS = 'http://www.w3.org/2000/svg';
// Unsichtbares SVG mit Filterdefinition anlegen
const svg = document.createElementNS(SVG_NS, 'svg');
svg.setAttribute('width', '0');
svg.setAttribute('height', '0');
svg.style.position = 'absolute';
const filter = document.createElementNS(SVG_NS, 'filter');
filter.id = 'graustufen';
filter.setAttribute('color-interpolation-filters', 'sRGB');
const matrix = document.createElementNS(SVG_NS, 'feColorMatrix');
matrix.setAttribute('type', 'saturate');
matrix.setAttribute('values', '0'); // 0 = keine Sättigung
filter.append(matrix);
svg.append(filter);
document.body.append(svg);
// Auf beliebiges HTML-Element anwenden
document.querySelector('img').style.filter = 'url(#graustufen)';
console.log(matrix instanceof SVGFEColorMatrixElement);
console.log(matrix.type.baseVal === SVGFEColorMatrixElement.SVG_FECOLORMATRIX_TYPE_SATURATE);Farbton mit einem Schieberegler live drehen
// HTML: <input type="range" id="hue" min="0" max="360" value="0">
// <svg><filter id="f"><feColorMatrix id="cm" type="hueRotate" values="0"/></filter></svg>
const cm = document.getElementById('cm');
const slider = document.getElementById('hue');
slider.addEventListener('input', () => {
cm.setAttribute('values', slider.value);
console.log('Farbton:', cm.values.baseVal.getItem(0).value, 'Grad');
});Eigenschaften auslesen und Typ über die DOM-Schnittstelle ändern
// <feColorMatrix id="sepia" in="SourceGraphic" result="getoent"
// 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"/>
const el = document.getElementById('sepia');
console.log(el.in1.baseVal); // Eingabequelle
console.log(el.result.baseVal); // Ergebnisname
console.log(el.type.baseVal); // 1 = matrix (Standard)
console.log(el.values.baseVal.numberOfItems); // Anzahl der Matrixwerte
// Auf luminanceToAlpha umschalten: Helligkeit wird zu Transparenz
el.type.baseVal = SVGFEColorMatrixElement.SVG_FECOLORMATRIX_TYPE_LUMINANCETOALPHA;
console.log(el.getAttribute('type'));