SVG（Scalable Vector Graphics）滤镜是一种强大的图形效果技术，允许在矢量图形上应用图像处理效果。滤镜通过对图形元素应用像模糊、阴影、光照等效果，使得图形更加生动与动态。SVG 滤镜是通过 <filter> 元素实现的，它能够让图形产生多种视觉效果，如模糊、阴影、颜色调整等。

目录

  1. 基本语法
  2. 常见滤镜效果
  3. 滤镜元素详解
  4. 滤镜效果应用示例
  5. 参考资料
  6. 出站链接

基本语法

<svg width="200" height="200">
  <defs>
    <filter id="f1" x="0" y="0" width="150%" height="150%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
    </filter>
  </defs>
  <circle cx="100" cy="100" r="50" stroke="black" stroke-width="3" fill="red" filter="url(#f1)" />
</svg>
  • <filter>：定义滤镜效果的容器。
  • id：滤镜的唯一标识符，用于引用该滤镜。
  • x、y、width、height：设置滤镜效果的区域，默认情况下，滤镜会应用于元素的边界框。
  • filter="url(#id)"：引用已经定义的滤镜效果。

常见滤镜效果

  1. 模糊效果（Gaussian Blur）通过 feGaussianBlur 元素，可以将图形元素进行模糊处理，模拟出焦外效果。<svg width="200" height="200"> <defs> <filter id="blurEffect"> <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> </filter> </defs> <circle cx="100" cy="100" r="50" fill="blue" filter="url(#blurEffect)" /> </svg>
    • stdDeviation：控制模糊的强度，数值越大，模糊效果越明显。
  2. 阴影效果（Drop Shadow）使用 feDropShadow 可以为图形添加阴影效果。<svg width="200" height="200"> <defs> <filter id="shadowEffect"> <feDropShadow dx="5" dy="5" stdDeviation="3" flood-color="black" /> </filter> </defs> <circle cx="100" cy="100" r="50" fill="green" filter="url(#shadowEffect)" /> </svg>
    • dx、dy：控制阴影的偏移量。
    • stdDeviation：控制阴影的模糊程度。
    • flood-color：设置阴影的颜色。
  3. 亮度调节（Brightness）feComponentTransfer 可以调整图形的亮度和对比度。<svg width="200" height="200"> <defs> <filter id="brightnessEffect"> <feComponentTransfer> <feFuncR type="table" tableValues="0.5 1" /> <feFuncG type="table" tableValues="0.5 1" /> <feFuncB type="table" tableValues="0.5 1" /> </feComponentTransfer> </filter> </defs> <circle cx="100" cy="100" r="50" fill="yellow" filter="url(#brightnessEffect)" /> </svg>
    • tableValues：通过调整该属性值，可以改变颜色通道（RGB）的亮度。
  4. 颜色滤镜（Color Matrix）feColorMatrix 可以用来进行颜色转换，包括色调变化、饱和度调整等。<svg width="200" height="200"> <defs> <filter id="colorEffect"> <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" /> </filter> </defs> <circle cx="100" cy="100" r="50" fill="blue" filter="url(#colorEffect)" /> </svg>
    • values：矩阵的值控制颜色通道的变换。
  5. 腐蚀效果（Turbulence）feTurbulence 用来模拟噪声或风的效果，常用来做纹理、烟雾或水波效果。<svg width="200" height="200"> <defs> <filter id="turbulenceEffect"> <feTurbulence type="fractalNoise" baseFrequency="0.05" result="turbulence" /> <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" /> </filter> </defs> <circle cx="100" cy="100" r="50" fill="orange" filter="url(#turbulenceEffect)" /> </svg>
    • baseFrequency：控制噪声的频率。
    • scale：控制效果的强度。

滤镜元素详解

  1. <filter>：定义滤镜的容器。它包含所有滤镜效果。
    • id：每个滤镜必须有一个唯一的 ID，以便在其他图形元素中引用。
    • x、y、width、height：定义滤镜区域的位置和尺寸，默认为 0 0 100% 100%。
  2. <feGaussianBlur>：用于模糊效果。
    • in：指定输入源。
    • stdDeviation：定义模糊的程度。
  3. <feDropShadow>：用于添加阴影效果。
    • dx、dy：阴影的偏移量。
    • stdDeviation：阴影的模糊程度。
    • flood-color：阴影的颜色。
  4. <feComponentTransfer>：用于调整颜色的亮度、对比度等。
    • type：可以是 table、discrete 或 linear。
    • tableValues：调整颜色的表格值。
  5. <feColorMatrix>：用于颜色矩阵变换。
    • type：可以是 matrix、saturate、hueRotate 等。
  6. <feTurbulence>：生成噪声效果，用于模拟水波或其他纹理效果。
    • type：可以是 fractalNoise 或 turbulence。
    • baseFrequency：控制噪声的频率。
  7. <feDisplacementMap>：用于基于位图生成失真效果。
    • in2：指定输入源。
    • scale：失真强度。

滤镜效果应用示例

  1. 简单的模糊效果
<svg width="200" height="200">
  <defs>
    <filter id="blurFilter">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
  </defs>
  <circle cx="100" cy="100" r="50" fill="blue" filter="url(#blurFilter)" />
</svg>
  1. 阴影效果
<svg width="200" height="200">
  <defs>
    <filter id="shadowFilter">
      <feDropShadow dx="4" dy="4" stdDeviation="3" flood-color="black" />
    </filter>
  </defs>
  <circle cx="100" cy="100" r="50" fill="green" filter="url(#shadowFilter)" />
</svg>

参考资料

出站链接

  • SVGOMG: 在线SVG优化工具，可用于优化滤镜效果。
  • Inkscape: 开源矢量图形设计软件，支持SVG和滤镜效果。

通过合理应用 SVG 滤镜，可以为图形添加动态视觉效果，增强用户的视觉体验。