返回首页
专题
网络编程
ASPjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 .NETjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 PHPjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 JSPjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 C#jrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 Javajrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 Delphijrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 VBjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 C/C++jrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 Android开发 IOS开发 Windows Phone开发 Pythonjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 Rubyjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 移动开发 其他编程jrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播
网页制作
HTMLjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 Dreamweaverjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 FrontPagesjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 Javascriptjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 web前端
数据库
SqlServer MySql Oracle Access DB2 SQLite 其他数据库
图形设计
photoshopjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 Fireworksjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 CorelDrawjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 Illustratorjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 AutoCadjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 FLASHjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播
操作系统
Windows xpjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 Windows 7jrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 Windows 8jrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 Windows 2003jrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 Windows Server 2008jrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 Linuxjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 Windows 10
网站运营
建站经验 SEO优化 站长心得 网赚技巧 网站推广 站长故事
手机学院
手机速递 安卓jrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 iphonejrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 手机评测 手机技巧 手机知识 手机应用 手机游戏 手机导购
网店宝典
开店指导 开店经验 网店装修 网店推广 网店seo 网购技巧
软件jrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播
办公软件 系统工具 媒体工具 压缩工具 图文处理 文件管理
范文之家
自我介绍 自我鉴定 写作模板 合同范本 工作总结 贺词祝福语 演讲致辞 思想汇报 入党申请书 实习报告 心得体会 工作计划 简历模板 工作报告 导游词 评语寄语 口号大全 策划书范文
信息工程
软件工程 企业开发 系统运维 软件测试
移民之家
移民动态 移民政策 移民百科 移民生活 技术移民 投资移民
知识大全
母婴 数码 摄影 装修 美文 常识 时尚 婚嫁 美食 养生 旅游 兴趣 职场 教育 文学 健康
问答大全
电脑网络 手机数码 QQ专区 生活 游戏 体育运动 娱乐明星 休闲爱好 文化艺术 社会民生 教育科学 健康医疗 商业理财 情感家庭 地区问题 其他
编程问答
IOS Android .NET Java C/C++ Delphi VC/MFC 其他语言 PHP MSSQL MYSQL Oracle 其他数据库 Web开发 Windows Linux 硬件/嵌入开发 网络通信 移动开发 云计算 企业IT 游戏开发
笑话大全
幽默笑话 爱情笑话 成人笑话 校园笑话 爆笑笑话 综合笑话 古代笑话 现代笑话 国外笑话

HTML5之SVG 2D入门10—滤镜的定义及使用(1/3)

来源:互联网  时间:2016/6/18 23:19:18

滤镜称得上是SVG最强大的功能了,它允许你给图形(图形元素和容器元素)添加各种专业软件中才有的滤镜特效。这样你就很容易在客户端生成和修改图像了。而且滤镜并没有破坏原有文档的结构,所以维护性也很好。
滤镜用filter元素定义:需要使用的时候,在需要滤镜效果的图形或容器上添加filter属性,引用相关滤镜即可。
滤镜元素包含很多的滤镜原子操作;每个原子操作在传入的对象上执行一个基本的图形操作,并产生图形输出。大多数的原子操作生成的结果基本都是一个RGBA图片。每个原子操作的输入既可以是源图形,也可以使其他原子操作的结果。所以引用滤镜效果的过程就是在源图形上应用相关的滤镜原子操作,最后生成一个新的图形并渲染。
当在容器上(例如g元素)使用filter属性的时候,滤镜效果会应用到容器中的所有元素。但是容器中的元素并不会直接渲染到屏幕,而是会被暂时存储起来。然后,图形命令会被当做处理引用的filter元素的过程的一部分被执行,这个时候才会去渲染。这是通过使用SourceGraphic和SourceAlpha来指定的。下面的第二个例子中的第三种情况会演示这种效果。
有些滤镜效果会生成一些没有定义的像素点,这些点会被处理成透明效果。
先来看一个例子:

复制代码

代码如下:



xmlns="http://www.w3.org/2000/svg" version="1.1">
SVG 滤镜效果示例
采用各种滤镜效果实现一副图形的3D的光照效果。





specularExp lighting-color="#bbbbbb"
result="specOut">




k1="0" k2="1" k3="1" k4="0" result="litPaint"/>










d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />

d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />

SVG





这个例子运行在FireFox上的效果是最后一幅图的结果:

 HTML5之SVG 2D入门10—滤镜的定义及使用

注意:在其他的浏览器中可能会有一些不同。
这个滤镜使用了6个效果,依次是(单步效果图如上图所示:):
    feGaussianBlur:这一步是进行高斯模糊处理;该特效的输入是源图片的透明度值,输出存到了临时缓冲blur中。blur值作为了下面feOffset和feSpecularLighting的输入。
    feOffset:这一步是把图片平移一些位置;该特效的输入是上一步中生成的blur,生成一个新的缓存offsetBlur。
    feSpecularLighting:这一步是把图片的表面进行光线的处理。输入是第一步中生成的blur,输出存放到新的缓存specOut中。
    两次feComposite:这两步是对不同的缓存层进行组合。
    feMerge:这一步是合并不同的层。该步通常是最后的一步,融合各个缓存的层,生成最终的图片,并渲染呈现。虽然这一步也可以用多次feComposite特效完成,但是毕竟还是不太方便。
filter元素与滤镜效果区域
滤镜效果区域指的是滤镜效果起作用的区域。这个区域的大小是由filter元素下列的属性定义的:
filterUnits = "userSpaceOnUse | objectBoundingBox"
这个属性定义了x,y,width和height使用的坐标空间。与其他的Unit相关的属性一样,该属性也是两个值:userSpaceOnUse和objectBoundingBox(默认值)。
userSpaceOnUse表示使用引用该filter元素的元素的用户坐标系统。
objectBoundingBox表示使用引用该filter元素的元素的包围盒的百分比做取值范围。

x,y,width,height

这些属性定义了滤镜起作用的矩形区域。滤镜效果不会应用在超过这个区域的点上。x,y的默认值是-10%,width与height的默认值是120%。

filterRes

该属性定义了中间缓存区域的大小,所以也定义了缓存图片的质量。通常情况下,不需要提供这个值,浏览器自己会选取合适的值。通常,滤镜效果区域应该定义成和背景正好能点和点一一对应,这样会带来一定的效率优势。

除了这些属性,filter元素的下列属性也很重要:
primitiveUnits = "userSpaceOnUse | objectBoundingBox"
这个属性定义每个原子操作中坐标和长度使用的坐标空间,这个属性的取值还是userSpaceOnUse和objectBoundingBox。只不过默认值是userSpaceOnUse。


上一篇HTML5之SVG 2D入门11—用户交互性动画介绍及应用
下一篇HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
明星图片
相关文章
《 HTML5之SVG 2D入门10—滤镜的定义及使用》由码蚁之家搜集整理于网络,
联系邮箱:mxgf168#qq.com(#改为@)