SVG使用<
filter>
元素定义过滤器。用于为SVG图形添加??特殊效果。
<
filter>
元素使用id属性唯一地标识它。 Internet Explorer 9和更早版本不支持SVG筛选器。
SVG <
feGaussianBlur>
过滤器【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″ 过滤器。
推荐阅读
- 微信转账限额20万是真的吗？微信转账限额20万查询_微信
- SVG feComposite过滤器用法示例
- SVG feComponentTransfer过滤器用法示例
- SVG阴影效果使用示例
- SVG feBlend过滤器用法示例
- SVG动画介绍和用法示例
- SVG animateTransform元素示例
- SVG animateMotion元素用法示例
- SVG动画（使用时间介绍和示例）