13 SVG过滤器(Filter)

SVG过滤器用来给SVG图形添加特效

从本章开始,我们学习SVG的一些高级功能,包括过滤器(Filter)、渐变(Gradient)。SVG还支持动画特性,但我们推荐使用CSS3的动画,所以这里不做讲解。

SVG 过滤器元素

SVG过滤器(也称为滤镜)用来给SVG图形添加特效,和PS软件中的滤镜效果类似。SVG中可用的过滤器元素包括:

  • <feBlend> - 图片混合
  • <feColorMatrix> - 颜色变换
  • <feComponentTransfer>
  • <feComposite> - 图片合成
  • <feConvolveMatrix> - 卷积变换
  • <feDiffuseLighting> - 散射光
  • <feDisplacementMap> - 位移图
  • <feFlood> - 探照灯
  • <feGaussianBlur> - 高斯模糊
  • <feImage> - 图像
  • <feMerge> - 合并
  • <feMorphology> - 变形
  • <feOffset> - 投影效果
  • <feSpecularLighting> 特殊光照
  • <feTile> - 瓦片效果
  • <feTurbulence> - 紊乱效果
  • <feDistantLight> - 远光效果
  • <fePointLight> - 点射效果
  • <feSpotLight> - 聚光效果
提示:你可以在每个元素上应用多个过滤器!