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

techbrood 发表于 2016-05-14 22:30:29

标签: svg, html5, 变换, 过滤器, 矩阵

- +

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

我们可以把颜色的值(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。

possitive(27) views8483 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章