锐客网

  1. 首页 > 生活百科 > it技术 > >

SVG模糊效果用法示例

svgIT知识模糊

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平移转换用法示例