跳到主要内容

滤镜

SVG 滤镜是一种强大的图像处理机制，可以对图形应用各种视觉效果，如模糊、阴影、光照、颜色变换等。滤镜通过组合多个图元操作，可以创建复杂的视觉效果。

滤镜基础​

滤镜使用 <filter> 元素定义，放在 <defs> 元素内部。每个滤镜包含一系列图元操作，按顺序处理输入图像。

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="blur">
      <feGaussianBlur stdDeviation="3"/>
    </filter>
  </defs>
  <text x="100" y="50" text-anchor="middle" font-size="30" filter="url(#blur)">
    模糊文字
  </text>
</svg>

filter 元素属性​

属性说明默认值
id滤镜唯一标识符必需
x滤镜区域左上角 x-10%
y滤镜区域左上角 y-10%
width滤镜区域宽度120%
height滤镜区域高度120%
filterUnits坐标系统objectBoundingBox

滤镜区域定义了滤镜效果的应用范围，默认比元素稍大以容纳阴影等效果。

模糊滤镜 - feGaussianBlur​

feGaussianBlur 应用高斯模糊效果。

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="blur-light">
      <feGaussianBlur stdDeviation="2"/>
    </filter>
    <filter id="blur-heavy">
      <feGaussianBlur stdDeviation="5"/>
    </filter>
  </defs>
  <circle cx="75" cy="75" r="40" fill="#3498db"/>
  <circle cx="150" cy="75" r="40" fill="#3498db" filter="url(#blur-light)"/>
  <circle cx="225" cy="75" r="40" fill="#3498db" filter="url(#blur-heavy)"/>
</svg>

stdDeviation 属性定义模糊程度，值越大越模糊。

阴影效果​

简单阴影​

使用 feOffset 和 feGaussianBlur 组合创建阴影：

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
      <feOffset in="blur" dx="4" dy="4" result="shadow"/>
      <feMerge>
        <feMergeNode in="shadow"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
  <rect x="50" y="20" width="100" height="60" rx="10" fill="#3498db" filter="url(#shadow)"/>
</svg>

投影滤镜 - feDropShadow​

SVG 滤镜提供了简化的阴影滤镜：

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="drop-shadow">
      <feDropShadow dx="3" dy="3" stdDeviation="3" flood-color="#000" flood-opacity="0.5"/>
    </filter>
  </defs>
  <rect x="50" y="20" width="100" height="60" rx="10" fill="#e74c3c" filter="url(#drop-shadow)"/>
</svg>

颜色矩阵 - feColorMatrix​

feColorMatrix 可以对颜色进行矩阵变换，实现颜色调整、灰度化、反色等效果。

灰度效果​

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="grayscale">
      <feColorMatrix type="saturate" values="0"/>
    </filter>
  </defs>
  <rect x="20" y="20" width="80" height="80" fill="#e74c3c"/>
  <rect x="120" y="20" width="80" height="80" fill="#3498db"/>
  <rect x="220" y="20" width="80" height="80" fill="#2ecc71"/>
  <rect x="20" y="20" width="80" height="80" fill="#e74c3c" filter="url(#grayscale)" opacity="0.7"/>
  <rect x="120" y="20" width="80" height="80" fill="#3498db" filter="url(#grayscale)" opacity="0.7"/>
  <rect x="220" y="20" width="80" height="80" fill="#2ecc71" filter="url(#grayscale)" opacity="0.7"/>
</svg>

反色效果​

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="invert">
      <feColorMatrix type="matrix" values="
        -1  0  0 0 1
         0 -1  0 0 1
         0  0 -1 0 1
         0  0  0 1 0"/>
    </filter>
  </defs>
  <rect x="20" y="20" width="60" height="60" fill="#3498db"/>
  <rect x="100" y="20" width="60" height="60" fill="#3498db" filter="url(#invert)"/>
</svg>

亮度调整​

<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="bright">
      <feColorMatrix type="matrix" values="
        1 0 0 0 0.3
        0 1 0 0 0.3
        0 0 1 0 0.3
        0 0 0 1 0"/>
    </filter>
    <filter id="dark">
      <feColorMatrix type="matrix" values="
        0.5 0   0   0 0
        0   0.5 0   0 0
        0   0   0.5 0 0
        0   0   0   1 0"/>
    </filter>
  </defs>
  <rect x="20" y="20" width="60" height="60" fill="#3498db"/>
  <rect x="120" y="20" width="60" height="60" fill="#3498db" filter="url(#bright)"/>
  <rect x="220" y="20" width="60" height="60" fill="#3498db" filter="url(#dark)"/>
</svg>

光照效果​

镜面光照 - feSpecularLighting​

<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="specular">
      <feSpecularLighting result="spec" specularExponent="20" lighting-color="#fff">
        <fePointLight x="100" y="50" z="200"/>
      </feSpecularLighting>
      <feComposite in="SourceGraphic" in2="spec" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
    </filter>
  </defs>
  <circle cx="100" cy="75" r="60" fill="#3498db" filter="url(#specular)"/>
</svg>

漫反射光照 - feDiffuseLighting​

<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="diffuse">
      <feDiffuseLighting in="SourceGraphic" diffuseConstant="1" lighting-color="#fff">
        <fePointLight x="100" y="50" z="100"/>
      </feDiffuseLighting>
    </filter>
  </defs>
  <circle cx="100" cy="75" r="60" fill="#3498db" filter="url(#diffuse)"/>
</svg>

浮雕效果 - feConvolveMatrix​

feConvolveMatrix 使用卷积矩阵对图像进行处理，可以创建浮雕、锐化等效果。

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="emboss">
      <feConvolveMatrix order="3" kernelMatrix="
        -2 -1 0
        -1  1 1
         0  1 2"/>
    </filter>
  </defs>
  <rect x="20" y="20" width="100" height="100" fill="#3498db"/>
  <rect x="160" y="20" width="100" height="100" fill="#3498db" filter="url(#emboss)"/>
</svg>

位移图 - feDisplacementMap​

feDisplacementMap 使用另一张图像的像素值来位移当前图像，创建扭曲效果。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="displace">
      <feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="2" result="turb"/>
      <feDisplacementMap in="SourceGraphic" in2="turb" scale="20" xChannelSelector="R" yChannelSelector="G"/>
    </filter>
  </defs>
  <rect x="20" y="20" width="160" height="160" fill="#e74c3c" filter="url(#displace)"/>
</svg>

噪声 - feTurbulence​

feTurbulence 生成 Perlin 噪声，可以创建云彩、水波等纹理效果。

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="turbulence">
      <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="3"/>
    </filter>
    <filter id="fractal">
      <feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="3"/>
    </filter>
  </defs>
  <rect x="10" y="10" width="130" height="130" filter="url(#turbulence)"/>
  <rect x="160" y="10" width="130" height="130" filter="url(#fractal)"/>
</svg>

组合滤镜 - feMerge​

feMerge 将多个滤镜结果合并在一起。

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="glow">
      <feGaussianBlur stdDeviation="4" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
  <text x="100" y="60" text-anchor="middle" font-size="40" font-weight="bold" 
        fill="#e74c3c" filter="url(#glow)">发光</text>
</svg>

滤镜输入输出​

滤镜图元通过 in 和 result 属性连接：

  • in：输入源，可以是 SourceGraphic（原图）、SourceAlpha（透明通道）或前一个图元的 result
  • result：输出名称，供后续图元引用
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="complex">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
      <feOffset in="blur" dx="3" dy="3" result="shadow"/>
      <feFlood flood-color="#000" flood-opacity="0.5" result="color"/>
      <feComposite in="color" in2="shadow" operator="in" result="final-shadow"/>
      <feMerge>
        <feMergeNode in="final-shadow"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
  <rect x="50" y="20" width="100" height="60" rx="10" fill="#3498db" filter="url(#complex)"/>
</svg>

实用示例​

内阴影​

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="inner-shadow">
      <feOffset dx="0" dy="3"/>
      <feGaussianBlur stdDeviation="3" result="blur"/>
      <feComposite operator="out" in="SourceGraphic" in2="blur" result="inverse"/>
      <feFlood flood-color="#000" flood-opacity="0.5" result="color"/>
      <feComposite operator="in" in="color" in2="inverse" result="shadow"/>
      <feComposite operator="over" in="shadow" in2="SourceGraphic"/>
    </filter>
  </defs>
  <rect x="50" y="20" width="100" height="60" rx="10" fill="#ecf0f1" filter="url(#inner-shadow)"/>
</svg>

描边效果​

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="outline">
      <feMorphology operator="dilate" radius="2" result="dilate"/>
      <feComposite in="dilate" in2="SourceGraphic" operator="out"/>
    </filter>
  </defs>
  <text x="100" y="60" text-anchor="middle" font-size="40" font-weight="bold" 
        fill="#3498db" filter="url(#outline)">描边</text>
</svg>

毛玻璃效果​

<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="glass">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
      <feColorMatrix in="blur" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 0.5 0"/>
    </filter>
  </defs>
  <rect x="0" y="0" width="200" height="150" fill="#3498db"/>
  <rect x="30" y="30" width="140" height="90" rx="10" fill="#fff" filter="url(#glass)"/>
</svg>

水波纹效果​

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="ripple">
      <feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="3" result="turb" seed="1">
        <animate attributeName="baseFrequency" dur="10s" values="0.02;0.04;0.02" repeatCount="indefinite"/>
      </feTurbulence>
      <feDisplacementMap in="SourceGraphic" in2="turb" scale="10"/>
    </filter>
  </defs>
  <circle cx="100" cy="100" r="80" fill="#3498db" filter="url(#ripple)"/>
</svg>

滤镜图元速查表​

图元功能
feGaussianBlur高斯模糊
feOffset位移
feColorMatrix颜色矩阵变换
feComponentTransfer颜色分量调整
feComposite图像合成
feMerge合并多个结果
feFlood填充颜色
feTile平铺
feMorphology形态学操作（膨胀/腐蚀）
feConvolveMatrix卷积矩阵
feDisplacementMap位移图
feTurbulence噪声生成
feSpecularLighting镜面光照
feDiffuseLighting漫反射光照
feDropShadow投影

小结​

SVG 滤镜提供了强大的图像处理能力。通过组合不同的滤镜图元，可以实现模糊、阴影、光照、颜色变换等各种视觉效果。理解滤镜的输入输出机制是创建复杂滤镜效果的关键。