<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 die Farben basierend auf einer Transformationsmatrix. Jeder Farbwert eines Pixels [R,G,B,A]
wird matrizenmultiplikativ mit einer 5x5-Matrix multipliziert, um neue Farben [R',G',B',A']
zu erzeugen.
Hinweis: Das Apostrophsymbol '
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 ausgedrückt, wird unten gezeigt, wie jeder Farbkanal im neuen Pixel berechnet wird. 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 Sie den Anteil an Rot im neuen Pixel, oder R'
:
Es ist die Summe von:
r1
multipliziert mit dem Rot des alten PixelsR
,r2
multipliziert mit dem Grün des alten PixelsG
,r3
multipliziert mit dem Blau des alten PixelsB
,r4
multipliziert mit dem Alpha des alten PixelsA
,- plus einer Verschiebung
r5
.
Diese angegebenen Werte können beliebige reelle Zahlen sein, obwohl das endgültige R' zwischen 0 und 1 beschränkt wird. 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 zum Beispiel ein komplett schwarzes Bild röter machen wollen, können wir r5
zu einer positiven reellen Zahl x machen, um die Röte jedes Pixels des neuen Bildes um x zu erhöhen.
Eine Identitätsmatrix sieht folgendermaßen 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 |
In ihr ist jeder neue Wert genau 1 mal sein alter Wert, ohne dass etwas hinzugefügt wird. Es wird empfohlen, die Matrix von hier aus zu manipulieren.
Verwendungszusammenhang
Attribute
in
: Werte umfassenSourceGraphic
,SourceAlpha
,BackgroundImage
,BackgroundAlpha
,FillPaint
,StrokePaint
oder einen Verweis auf eine andere Filterprimitive.type
: Werte umfassenmatrix
,saturate
,hueRotate
undluminanceToAlpha
.values
: Der Wert für den Matrize-Typ, der imtype
-Attribut festgelegt wird.
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
BCD tables only load in the browser
Siehe auch
- SVG-Filter-Primitive-Attribute
<filter>
<animate>
<set>
<feBlend>
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feFlood>
<feGaussianBlur>
<feImage>
<feMerge>
<feMorphology>
<feOffset>
<feSpecularLighting>
<feTile>
<feTurbulence>
- SVG-Tutorial: Filtereffekte