SVG滤镜:feColorMatrix

颜色滤镜就是用来对原图的每个像素点的RGBA颜色进行处理生产新的RGBA颜色.
元素通常有两个属性:type和values
type属性：存在 matrix / saturate / hueRotate / luminanceToAlpha 四个属性值.
主要还是讲下这个matrix
matrix：通过矩阵计算改变颜色值.
此时values取值为一串4行5列的矩阵值，values="a00 a01 a02 a03 a04 a10... a34"。具体运算规则为：
| R' | | a00 a01 a02 a03 a04 | | R |
| G' | | a10 a11 a12 a13 a14 | | G |
| B' | = | a20 a21 a22 a23 a24 | * | B |
| A' | | a30 a31 a32 a33 a34 | | A |
| 1 | | 0 0 0 0 1 | | 1 |
矩阵第一行控制R红色通道，第二行控制G绿色通道，第三行控制B蓝色通道，最后一行控制A透明度通道.
R,G,B,A代表原来的颜色值,R',G',B',A'代表通过矩阵生成新的颜色值
feColorMatrix的matrix是一个45的矩阵。前面4列是颜色通道的比例系数，最后一列是常量偏移。

20160422110932437.png
上面公式中的rr表示red to red系数，以此类推。c1~c4表示常量偏移(计算方法为n255).
这个变换矩阵看起来比较复杂，在实践上常使用一个简化的对角矩阵，即除了rr/gg/bb/aa取值非零外，其余行列取值为0，这就退化成了简单的各颜色通道的独立调整
也就是说,第一行用来控制red层,第二行用来控制green层,第三行用来控制blue层,最后一层是alpha层

<filter id="linear"> 
        <feColorMatrix type="matrix" 
      values="R 0 0 0 0 
              0 G 0 0 0
              0 0 B 0 0 
              0 0 0 A 0 "/>
 </feColorMatrix> 
</filter>

006tNbRwgy1fdsjel4701j312o16fq6x.jpg

总结要控制颜色的话,主要利用R,G,B,A在矩阵的位置,和最后一列的M偏移位置来改变图片的颜色

<feColorMatrix in="SourceGraphic" type="matrix" 
    values="2 0 0 0 100
            0 2 0 0 100
            0 0 1 0 0
            0 0 0 1 0" />

2倍的R和G,以及对应的偏移,red+green=yellow

微信图片_20181113111809.png

<feColorMatrix in="SourceGraphic" type="matrix" 
    values="2 0 0 0 100
            0 2 0 0 0
            0 0 1 0 100
            0 0 0 1 0" />

R和B的偏移,red+blue=purple

微信图片_20181113111932.png