现在位置: 首页 > SVG 教程 > 正文

SVG 滤镜


SVG 滤镜是一种强大的图形效果技术,可以用来实现各种视觉效果,例如模糊、阴影、光照等。

滤镜可以应用于 SVG 图形元素,例如矩形、圆形、路径等,以及 SVG 文本元素,使它们呈现出不同的外观和效果。

基本语法

SVG 滤镜通常使用 <filter> 元素定义,并通过 filter 属性将其应用于目标元素。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 定义滤镜 -->
  <filter id="filter_id">
    <!-- 滤镜效果 -->
  </filter>
  
  <!-- 应用滤镜的目标元素 -->
  <rect x="50" y="50" width="100" height="80" filter="url(#filter_id)" />
</svg>

滤镜效果

SVG 滤镜可以实现多种效果,常见的滤镜效果包括:

  • 模糊(Blur):使图像产生模糊效果,通过 <feGaussianBlur> 元素实现。

  • 阴影(Shadow):为图像添加阴影效果,通过 <feDropShadow> 元素实现。

  • 亮度、对比度调整(Brightness, Contrast):调整图像的亮度和对比度,通过 <feComponentTransfer> 元素实现。

  • 颜色矩阵(Color Matrix):通过颜色矩阵操作修改图像的颜色,通过 <feColorMatrix> 元素实现。

  • 混合模式(Blend Mode):将两个图像混合在一起,通过 <feBlend> 元素实现。

以下代码定义了一个模糊滤镜,然后将其应用于一个红色填充的矩形,使矩形呈现出模糊的效果。

实例

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 定义模糊滤镜 -->
  <filter id="blur_filter">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>
 
  <!-- 应用模糊滤镜的矩形 -->
  <rect x="50" y="50" width="100" height="80" fill="red" filter="url(#blur_filter)" />
</svg>

尝试一下 »

SVG 可用的滤镜是:

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

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

注意事项

  • SVG 滤镜可以组合使用,可以在一个 <filter> 元素中定义多个滤镜效果。

  • 每种滤镜效果都有不同的参数可以调整,例如模糊滤镜的标准差参数、阴影滤镜的偏移量和模糊半径等。

  • SVG 滤镜可以与 CSS 样式表一起使用,也可以直接在SVG元素上使用 style 属性进行定义。

通过使用 SVG 滤镜,你可以为 SVG 图形元素添加各种视觉效果,使其呈现出更加生动、多样化的外观。