##SVG 滤镜 在 SVG 中，可用的滤镜有：

  • feBlend
  • feColorMatrix
  • feComponentTransfer
  • feComposite
  • feConvolveMatrix
  • feDiffuseLighting
  • feDisplacementMap
  • feFlood
  • feGaussianBlur
  • feImage
  • feMerge
  • feMorphology
  • feOffset
  • feSpecularLighting
  • feTile
  • feTurbulence
  • feDistantLight
  • fePointLight
  • feSpotLight

注意：

  • 您可以在每个 SVG 元素上使用多个滤镜！
  • IE 、Safari浏览器暂不支持滤镜!

##虚化Blur Effects; <filter>标签用来定义 SVG 滤镜。<filter>标签使用必需的 id 属性来定义向图形应用哪个滤镜？ <filter>标签必须嵌套在 <defs> 标签内。<defs> 标签是 definitions 的缩写，它允许对诸如滤镜等特殊元素进行定义。

###SVG <feGaussianBlur>

####示例1

<svg height="110" width="110">
  <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" filter="url(#f1)" />
</svg>

代码解释：

  • 该元素的id属性定义了滤镜的唯一名称
  • 元素定义了虚化效果
  • 在in=“SourceGraphic”部分定义了在整个元素中创建的效果
  • 该stdDeviation属性定义虚化的值
  • 该元件的滤镜属性链接到了“f1”滤镜