SVG 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

SVG 滤镜简介

  所有互联网的SVG滤镜定义在 < defs > 元素中, < filter > 标签用来定义SVG滤镜, < filter > 标签使用必须的ID属性来定义向图形应用到那个滤镜中

在 SVG 中,可用的滤镜有:

  • feBlend SVG 滤镜。使用不同的混合模式把两个对象合成在一起。
  • feColorMatrix SVG 滤镜。应用matrix转换。
  • feComponentTransfer SVG 滤镜。执行数据的 component-wise 重映射。
  • feComposite SVG 滤镜。
  • feConvolveMatrix SVG 滤镜。
  • feDiffuseLighting SVG 滤镜。
  • feDisplacementMap SVG 滤镜。
  • feDistantLight SVG 滤镜。 Defines a light source
  • feFlood SVG 滤镜。
  • feGaussianBlur SVG 滤镜。对图像执行高斯模糊。
  • feImage SVG 滤镜。
  • feMerge SVG 滤镜。创建累积而上的图像。
  • feMorphology SVG 滤镜。 对源图形执行"fattening" 或者 "thinning"。
  • feOffset SVG 滤镜。相对与图形的当前位置来移动图像。
  • fePointLight SVG 滤镜。
  • feSpecularLighting SVG 滤镜。
  • feSpotLight SVG 滤镜。
  • feTile SVG 滤镜。
  • feTurbulence SVG 滤镜。

注释:您可以在每个 SVG 元素上使用多个滤镜!