个性化阅读
专注于IT技术分析

SVG模糊效果用法示例

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>

立即测试

解释

  • <filter>的id属性定义了模式的唯一名称。
  • <feGaussianBlur>元素用于定义模糊效果。
  • <feGaussianBlur>元素的in =” SourceGraphic”部分用于定义为整个元素创建的效果。
  • stdDeviation属性用于定义模糊量。
  • <rect>元素的filter属性用于将元素链接到” p1″过滤器。
赞(0) 打赏
未经允许不得转载:srcmini » SVG模糊效果用法示例
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏