SVG使用<filter>元素定义过滤器。用于为SVG图形添加特殊效果。
<filter>元素使用id属性唯一地标识它。 Internet Explorer 9和更早版本不支持SVG筛选器。
SVG <feGaussianBlur>过滤器
SVG使用<feGaussianBlur>元素显示模糊效果。
例子
<!DOCTYPE html>
<html>
<body>
<h2>Blur effect</h2>
<svg height="250" width="250">
<filter id="p1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
<rect width="120" height="120" stroke="green" stroke-width="3" fill="purple" filter="url(#p1)" />
</svg>
</body>
</html>立即测试
解释
- <filter>的id属性定义了模式的唯一名称。
- <feGaussianBlur>元素用于定义模糊效果。
- <feGaussianBlur>元素的in =” SourceGraphic”部分用于定义为整个元素创建的效果。
- stdDeviation属性用于定义模糊量。
- <rect>元素的filter属性用于将元素链接到” p1″过滤器。
