<feColorMatrix>

<feblend>
<fecolormatrix>
<fecomponenttransfer>
<fecomposite>
<feconvolvematrix>
<fediffuselighting>
<fedisplacementmap>
<feflood>
<fefunca>
<fefuncb>
<fefuncg>
<fefuncr>
<fegaussianblur>
<feimage>
<femerge>
<femergenode>
<femorphology>
<feoffset>
<fepointlight>
<fespecularlighting>
<fespotlight>
<fetile>
<feturbulence>
SVG 元素
1. A
2. B-C
3. D
  1. <defs>
  2. <desc>
4. E
  1. <ellipse>
5. F
6. G
7. H
  1. <hkern>
8. I
  1. <image>
9. J-L
  1. <line>
  2. <linearGradient>
10. M
11. N-P
12. Q-R
  1. <radialGradient>
  2. <rect>
13. S
  1. <script>
  2. <set>
  3. <stop>
  4. <style>
  5. <svg>
  6. <switch>
  7. <symbol>
14. T
15. U
  1. <use>
16. V-Z
  1. <view>
  2. <vkern>

<feColorMatrix> SVG filter element changes colors based on a transformation matrix. Every pixel's color value [R,G,B,A] is matrix multiplied by a 5 by 5 color matrix to create new color [R',G',B',A'] .

注意： The prime symbol ' is used in mathematics indicate the result of a transformation.

| 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 |

In simplified terms, below is how each color channel in the new pixel is calculated. The last row is ignored because its values are constant.

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

Take the amount of red in the new pixel, or R' :

It is the sum of:

r1 times the old pixel's red R ,
r2 times the old pixel's green G ,
r3 times of the old pixel's blue B ,
r4 times the old pixel's alpha A ,
plus a shift r5 .

These specified amounts can be any real number, though the final R' will be clamped between 0 and 1. The same goes for G' , B' ，和 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 ]

If, say, we want to make a completely black image redder, we can make the r5 a positive real number x , boosting the redness on every pixel of the new image by x .

An identity matrix 看起来像这样：

     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 it, every new value is exactly 1 times its old value, with nothing else added. It is recommended to start manipulating the matrix from here.

Usage context

类别	Filter primitive element
准许内容	Any number of the following elements, in any order: `<animate>` , `<set>`

in
type
values

<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


>





<

使用


href



=


"

#circles

"



/>





<

text


x



=


"

70

"



y



=


"

50

"



>


参考



</

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


>





<

使用


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


>





<

使用


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


>





<

使用


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


>





<

使用


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


>





<

使用


href



=


"

#circles

"



transform



=


"

translate(0 350)

"



filter



=


"

url(#colorMeLTA)

"



/>





<

text


x



=


"

70

"



y



=


"

400

"



>


luminanceToAlpha



</

text


>





</

svg


>