SVG 滤镜

SVG 滤镜

SVG 滤镜用于为 SVG 图形添加特殊效果。

SVG 滤镜的浏览器支持

表中的数字指定支持 SVG 滤镜的首个浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
8.0 10.0 3.0 6.0 9.6

SVG 滤镜元素

在接下来的章节中，我们会演示一些可能的滤镜效果 - 并让您了解 SVG 可以做什么。

SVG 中可用的过滤元素有：

  • <feBlend> - 用于组合图像的过滤器
  • <feColorMatrix> - 颜色变换过滤器
  • <feComponentTransfer>
  • <feComposite>
  • <feConvolveMatrix>
  • <feDiffuseLighting>
  • <feDisplacementMap>
  • <feFlood>
  • <feGaussianBlur>
  • <feImage>
  • <feMerge>
  • <feMorphology>
  • <feOffset> - 过滤阴影
  • <feSpecularLighting>
  • <feTile>
  • <feTurbulence>
  • <feDistantLight> - 照明滤镜
  • <fePointLight> - 照明滤镜
  • <feSpotLight> - 照明滤镜

提示：您可以在每个 SVG 元素上使用多个滤镜！