多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
# SVG 模糊效果 **注意:** Internet Explorer和Safari不支持SVG滤镜! ## &lt;defs&gt; 和 &lt;filter&gt; 所有互联网的SVG滤镜定义在&lt;defs&gt;元素中。&lt;defs&gt;元素定义短并含有特殊元素(如滤镜)定义。 &lt;filter&gt;标签用来定义SVG滤镜。&lt;filter&gt;标签使用必需的id属性来定义向图形应用哪个滤镜? ## SVG &lt;feGaussianBlur&gt; ## 实例 1 &lt;feGaussianBlur&gt; 元素是用于创建模糊效果: ![fegaussianblur](https://box.kancloud.cn/2015-12-17_5672b03c87cab.jpg) 下面是SVG代码: ## 实例 ``` <svg xmlns="http://www.w3.org/2000/svg" version="1.1">   <defs>     <filter id="f1" x="0" y="0">       <feGaussianBlur in="SourceGraphic" stdDeviation="15" />     </filter>   </defs>   <rect width="90" height="90" stroke="green" stroke-width="3"   fill="yellow" filter="url(#f1)" /> </svg> ``` 对于Opera用户:[查看SVG文件](images/fegaussianblur1.svg)(右键单击SVG图形预览源)。 **代码解析:** * &lt;filter&gt;元素id属性定义一个滤镜的唯一名称 * &lt;feGaussianBlur&gt;元素定义模糊效果 * in="SourceGraphic"这个部分定义了由整个图像创建效果 * stdDeviation属性定义模糊量 * &lt;rect&gt;元素的滤镜属性用来把元素链接到"f1"滤镜