SVG使用<
feGaussianBlur>
元素显示模糊效果。 Internet Explorer 9和更早版本不支持SVG筛选器
例子
<
!DOCTYPE html>
<
html>
<
body>
<
svg height="250" width="250">
<
defs>
<
filter id="p1" x="0" y="0">
<
feGaussianBlur in="SourceGraphic" stdDeviation="15" />
<
/filter>
<
/defs>
<
rect width="120" height="120" stroke="green" stroke-width="3" fill="purple" filter="url(#p1)" />
<
/svg>
<
/body>
<
/html>
【SVG模糊效果用法示例】立即测试
解释
- < filter> 的id属性定义了模式的唯一名称。
- < feGaussianBlur> 元素用于定义模糊效果。
- < feGaussianBlur> 元素的in =” SourceGraphic” 部分用于定义为整个元素创建的效果。
- stdDeviation属性用于定义模糊量。
- < rect> 元素的filter属性用于将元素链接到” p1″ 过滤器。
推荐阅读
- SVG平移转换用法示例
- SVG设置元素用法示例
- SVG序列转换用法示例
- SVG缩放转换用法示例
- SVG脚本编写示例和解释
- SVG围绕中心点缩放用法示例
- 最佳家居装修应用软件下载推荐合集（让你装修房子更轻松）
- 21个最佳Photoshop插件下载推荐（可节省你的工作时间）
- Android最佳离线RPG游戏下载推荐合集（哪些最好玩（））