SVG过滤器feColorMatrix矩阵变换效果用法详解

在计算机图形学（数学）中，矩阵乘法可用于把空间向量进行几何变换。

我们可以把颜色的值（RGBA）表示成一个四维空间向量：color = (r, g, b, a);

那么就可以应用矩阵相乘的方法来对其进行变换操作。

SVG标准中的feColorMatrix，当类型取值为matrix时，就是利用这个方法来实现的图像过滤效果。

变换矩阵的定义和说明

feColorMatrix的matrix是一个4*5的矩阵。前面4列是颜色通道的比例系数，最后一列是常量偏移。

上面公式中的rr表示red to red系数，以此类推。c1~c4表示常量偏移。

第一个4*5矩阵为变换矩阵，第二个单列矩阵为待变换对象的像素值。右侧单列矩阵为矩阵1和2的点积结果。

这个变换矩阵看起来比较复杂，在实践上常使用一个简化的对角矩阵，即除了rr/gg/bb/aa取值非零外，其余行列取值为0，这就退化成了简单的各颜色通道的独立调整。

feColorMatrix的语法

<filter id="f1" x="0%" y="0%" width="100%" height="100%">  
  <feColorMatrix   
     result="original" id="c1" type="matrix"   
     values="1 0 0 0 0    
             0 1 0 0 0   
             0 0 1 0 0   
             0 0 0 1 0" />  
</filter>

上述feColorMatrix过滤器的类型值为matrix，除此之外，还有saturate（饱和度）和hueRotate（色相旋转），取值比较简单，这里不做说明。

显然当变换矩阵为单位对角矩阵时，变换结果和原值相等。

我们可以尝试调整比例系数，比如把rr的值设置为0，即去除图像中的red颜色通道含量：

代码如下：

<filter id="colorMatrix">  
    <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0  
       0 1 0 0 0  
       0 0 1 0 0  
       0 0 0 1 0" />  
</filter>  
<g filter="">  
    <circle cx="30" cy="30" r="20" fill="red" fill-opacity="0.5" />  
</g>  
<g filter="url(#colorMatrix)">  
    <circle cx="80" cy="30" r="20" fill="red" fill-opacity="0.5" />  
</g>

你可以自己在线试试。注意Filter Effects Module Level 1的状态还是Working Draft，所以使用前注意测试浏览器支持情况。

如果是学习，请使用Chrome。