阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      SVG 滤镜

      SVG 滤镜


      SVG滤镜用来增加对SVG图形的特殊效果。

      有一种情况,基本形状不能提供你想要达到的效果的灵活性。投阴影、提供一个十分流行的示例,利用一个小变组合无法合理地创建它。滤镜是SVG的机制,允许创建精密的效果。

      一个基本示例是在SVG内容上添加一个模糊效果上。当基本模糊可以用渐变的帮助来实现时,在很多地方都需要用到模糊滤镜。


      SVG 滤镜

      在本教程中,我们将仅展示一个可能采用的特殊效果。基础知识展示后,你已经学会使用特殊效果,你应该能够适用于其他地方。这里的关键是给你一个怎样做SVG的想法,而不是重复整个规范。

      SVG可用的滤镜是:

      • feBlend - 与图像相结合的滤镜
      • feColorMatrix - 用于彩色滤光片转换
      • feComponentTransfer
      • feComposite
      • feConvolveMatrix
      • feDiffuseLighting
      • feDisplacementMap
      • feFlood
      • feGaussianBlur
      • feImage
      • feMerge
      • feMorphology
      • feOffset - 过滤阴影
      • feSpecularLighting
      • feTile
      • feTurbulence
      • feDistantLight - 用于照明过滤
      • fePointLight - 用于照明过滤
      • feSpotLight - 用于照明过滤

      除此之外,您可以在每个 SVG 元素上使用多个滤镜!

      目录
      目录