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 元素上使用多个滤镜!

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了