上一篇
下一篇
SVG滤镜的具体用法
作者:admin 日期:2016-07-06
以高斯模糊（Gaussian Blur）为例，
<filter> 标签用来定义 SVG 滤镜。<filter> 标签使用必需的 id 属性来定义向图形应用哪个滤镜？
<filter> 标签必须嵌套在 <defs> 标签内。<defs> 标签是 definitions 的缩写，它允许对诸如滤镜等特殊元素进行定义。
XML/HTML代码
- <defs xmlns="http://www.w3.org/2000/svg">
- <filter id="Gaussian_Blur">
- <feGaussianBlur in="SourceGraphic" stdDeviation="2"/>
- </filter>
- </defs>
几个注意点：
- SVG结构代码要使用内联方式引入，否则外联CSS方式似乎不生效
- 选择符搭配很自由，完全跟HTML一样，比如：svg#g1:hover g#gg{filter:url(#Gaussian_Blur)}
- 如果是做按钮用途，按钮要设立一个透明的点击区域，否则鼠标只有点到有像素的位置才有效果。模糊效果要注意边缘与svg容器的边距。
文章来自: 
引用通告: 
Tags: 
相关日志:
评论: 0 | 引用: 0 | 查看次数: 4939
发表评论
