SVG 模糊效果 – 高斯模糊

🌙
手机阅读
本文目录结构

SVG 模糊效果


注意: Internet Explorer和Safari不支持SVG滤镜!


<defs> 和 <filter>

所有互联网的SVG滤镜定义在元素中。元素定义短并含有特殊元素(如滤镜)定义。

<filter>标签用来定义SVG滤镜。<filter>标签使用必需的id属性来定义向图形应用哪个滤镜?


SVG <feGaussianBlur>

实例 <feGaussianBlur> 元素是用于创建模糊效果:

下面是SVG代码:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" 
    stroke-width="3" fill="yellow" f
    ilter="url(#f1)" />
</svg>

代码解析:

  • 元素id属性定义一个滤镜的唯一名称
  • 元素定义模糊效果
  • in=“SourceGraphic"这个部分定义了由整个图像创建效果
  • stdDeviation属性定义模糊量
  • 元素的滤镜属性用来把元素链接到"f1"滤镜

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了