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(2) views5238 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章
  • 微信公众号在线生成二维码带参数怎么搞?

    带参数二维码是微信公众号渠道二维码的一种实现
    微信的带参数二维码有两种,一种是临时二维码,一种是永久二维码,但是永久二维码的生成是有个数限制的,微...

  • WebGL场景中多相机拍摄的原理和意义

    一般而言,3D场景的渲染只需要一个相机,不过借助多相机可以获取一些单相机无法达到的特效。比如突显特定对象并模糊背景。
    3D相机渲染的基本原理是依靠颜色...

  • WebAssembly工作原理和JavaScript语言性能对比分析

    本文简单说明WebAssembly(简称wasm)工作原理和高性能的原由(和JavaScript相比)。不过需要提醒的是Wasm并非设计来完全替代JS,而是对JS的一个强大补充,JS中...

  • 深入理解CSS3滤镜(filter)功能和实例详解

    CSS3滤镜功能源自SVG滤镜规范,SVG滤镜最早用来给矢量图添加类似PS中像素图的一些特效。
    把这个滤镜功能引入到普通HTML元素中可以带来很有趣的效果(模糊、...

  • HTTP1.1协议现状、问题和解决方案

    HTTP的现状最早的HTTP协议非常简单,只能用来传送文本,方法也只有GET,后来逐步发展到1.1,能够支持多种MIME格式数据(如文本、文件),支持GET,POST,HEAD,OPTI...

  • HTML5、Hybrid APP、Native APP对比和技术选型

    HTML5和Native APP都很容易理解。为了获得HTML5的移植性和移动本地应用的高性能,搞出来一些混合APP的解决方案。比如Apache的Cordova(也就是以前的PhoneGap),...

  • Babylon.js入门教程和开发实例

    Babylon.js是一款WebGL开发框架。和Three.js类似。主要的技术区别是Three.js还试图回退兼容CSS 3D。Three.js是完全社区推动的,比Babylon.js要成熟些,而Babylon...

  • Blender2.7 快捷键一览表

    通用操作
    停止当前操作:ESC
    快捷搜索:SPACE撤销:ctrl+z重做:ctrl+shift+z渲染:F12
    单选:鼠标右键(RMB)全选:A
    框选:B
    刷选:...

  • S3TC(S3 Texture Compression)纹理压缩格式详解

    使用S3TC格式存储的压缩纹理是以4X4的纹理单元块(texel blocks)为基本单位存储的,每纹理单元块(texel blocks)有64bit或者128bit的纹理单元数据(texel data)。这...

  • 如何使用WebGL创建一个逼真的下雨动画

    之前写过文章来分别讲解如何使用CSS3和Canvas2D实现过雨滴和下雨动画。通过背景处理看起来也有视觉上的3D效果,但并非真正的3D场景,如果要加入用户交互,进行36...

  • WebGL入门教程1 - 3D绘图基础知识

    现代浏览器努力使得Web用户体验更为丰富,而WebGL正处于这样的技术生态系统的中心位置。其应用范围覆盖在线游戏、大数据可视化、计算机辅助设计、虚拟现实以及数...

  • 使用CSS3实现流星雨动画教程

    很多营销页面中需要实现类似流星雨的动画背景,营造节日浪漫的气氛。要实现这样的效果,有两种方法,一个是使用Canvas,一个是使用纯CSS3,我们这里介绍第2种方...

  • 更多...