<feColorMatrix>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Das <feColorMatrix>
SVG-Filterelement ändert Farben basierend auf einer Transformationsmatrix. Die Farbwerte [R,G,B,A]
jedes Pixels werden durch eine 5x5-Farbmatrix matrix-multipliziert, um neue Farbwerte [R',G',B',A']
zu erzeugen.
Hinweis:
Das Prime-Symbol '
wird in der Mathematik verwendet, um das Ergebnis einer Transformation anzuzeigen.
| R' | | r1 r2 r3 r4 r5 | | R | | G' | | g1 g2 g3 g4 g5 | | G | | B' | = | b1 b2 b3 b4 b5 | * | B | | A' | | a1 a2 a3 a4 a5 | | A | | 1 | | 0 0 0 0 1 | | 1 |
Vereinfacht gesagt, wird jeder Farbkanal im neuen Pixel wie folgt berechnet. Die letzte Zeile wird ignoriert, da ihre Werte konstant sind.
R' = r1*R + r2*G + r3*B + r4*A + r5 G' = g1*R + g2*G + g3*B + g4*A + g5 B' = b1*R + b2*G + b3*B + b4*A + b5 A' = a1*R + a2*G + a3*B + a4*A + a5
Nehmen wir den Anteil des Rotwerts im neuen Pixel, also R'
:
Dieser ergibt sich durch die Summe von:
r1
multipliziert mit dem Rotwert des alten PixelsR
,r2
multipliziert mit dem Grünwert des alten PixelsG
,r3
multipliziert mit dem Blauwert des alten PixelsB
,r4
multipliziert mit dem Alphawert des alten PixelsA
,- plus einer Verschiebung
r5
.
Diese angegebenen Werte können beliebige reelle Zahlen sein, jedoch wird der finale R' auf Werte zwischen 0 und 1 begrenzt. Dasselbe gilt für G', B' und A'.
R' = r1 * R + r2 * G + r3 * B + r4 * A + r5 New red = [ r1 * old red ] + [ r2 * old green ] + [ r3 * old Blue ] + [ r4 * old Alpha ] + [ shift of r5 ]
Wenn wir beispielsweise ein komplett schwarzes Bild röter machen möchten, können wir r5
eine positive reelle Zahl x zuweisen, wodurch die Rottöne in jedem Pixel des neuen Bildes um x verstärkt werden.
Eine Einheitsmatrix sieht so aus:
R G B A W R' | 1 0 0 0 0 | G' | 0 1 0 0 0 | B' | 0 0 1 0 0 | A' | 0 0 0 1 0 |
Dabei entspricht jeder neue Wert genau 1-mal dem alten Wert, ohne dass etwas hinzugefügt wird. Es wird empfohlen, bei der Manipulation der Matrix von hier aus zu beginnen.
Wie andere Filterprimitive verwendet dieses Element standardmäßig die Farbräume linearRGB
. Sie können color-interpolation-filters
verwenden, um stattdessen sRGB
zu nutzen.
Einsatzkontext
Attribute
in
: Werte umfassenSourceGraphic
,SourceAlpha
,BackgroundImage
,BackgroundAlpha
,FillPaint
,StrokePaint
oder eine Referenz auf ein anderes Filter-Primitive.type
: Werte umfassenmatrix
,saturate
,hueRotate
undluminanceToAlpha
.values
: Der Wert für den Matrixtyp, der imtype
-Attribut festgelegt wurde.
DOM-Schnittstelle
Dieses Element implementiert die SVGFEColorMatrixElement
-Schnittstelle.
Beispiel
SVG
<svg
width="100%"
height="100%"
viewBox="0 0 150 500"
preserveAspectRatio="xMidYMid meet"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- ref -->
<defs>
<g id="circles">
<circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" />
<circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" />
<circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" />
</g>
</defs>
<use href="#circles" />
<text x="70" y="50">Reference</text>
<!-- identity matrix -->
<filter id="colorMeTheSame">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 1 0" />
</filter>
<use
href="#circles"
transform="translate(0 70)"
filter="url(#colorMeTheSame)" />
<text x="70" y="120">Identity matrix</text>
<!-- Combine RGB into green matrix -->
<filter id="colorMeGreen">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0 0 0 0 0
1 1 1 1 0
0 0 0 0 0
0 0 0 1 0" />
</filter>
<use
href="#circles"
transform="translate(0 140)"
filter="url(#colorMeGreen)" />
<text x="70" y="190">rgbToGreen</text>
<!-- saturate -->
<filter id="colorMeSaturate">
<feColorMatrix in="SourceGraphic" type="saturate" values="0.2" />
</filter>
<use
href="#circles"
transform="translate(0 210)"
filter="url(#colorMeSaturate)" />
<text x="70" y="260">saturate</text>
<!-- hueRotate -->
<filter id="colorMeHueRotate">
<feColorMatrix in="SourceGraphic" type="hueRotate" values="180" />
</filter>
<use
href="#circles"
transform="translate(0 280)"
filter="url(#colorMeHueRotate)" />
<text x="70" y="330">hueRotate</text>
<!-- luminanceToAlpha -->
<filter id="colorMeLTA">
<feColorMatrix in="SourceGraphic" type="luminanceToAlpha" />
</filter>
<use href="#circles" transform="translate(0 350)" filter="url(#colorMeLTA)" />
<text x="70" y="400">luminanceToAlpha</text>
</svg>
Ergebnis
Spezifikationen
Specification |
---|
Filter Effects Module Level 1 # feColorMatrixElement |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
feColorMatrix | ||||||||||||
in | ||||||||||||
type | ||||||||||||
values |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
Siehe auch
- SVG-Filterprimitive-Attribute
<filter>
<animate>
<set>
<feBlend>
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feFlood>
<feGaussianBlur>
<feImage>
<feMerge>
<feMorphology>
<feOffset>
<feSpecularLighting>
<feTile>
<feTurbulence>
- SVG-Tutorial: Filtereffekte