13.1 SVG高斯模糊(Gaussian Blur)

高斯模糊用来给图形添加模糊效果

<defs> 和 <filter>

所有的SVG过滤器定义在一个 <defs> 元素中。<defs> 元素是definition的简写,用来包含特定元素的定义。

<filter> 元素用来定义一个SVG过滤器。<filter> 元素有一个必需的id属性用来唯一标识该过滤器。然后图形通过这个id来应用该过滤器。

SVG <feGaussianBlur>

实例代码


  
    
      
    
  
  
自己试试 »

代码解释

  • <filter> 标签的 id 属性可为滤镜定义一个唯一的名称(同一滤镜可被文档中的多个元素使用)
  • filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时,和CSS id选择器语法类似,要使用 # 字符
  • 滤镜效果是通过 <feGaussianBlur> 标签进行定义的。fe前缀是filter effects的缩写,可用于所有的滤镜
  • <feGaussianBlur> 标签的 stdDeviation 属性可定义模糊的程度
  • in="SourceGraphic" 表示效果应用于整个图形元素