滤镜

SVG 滤镜是 SVG 中强大的视觉效果工具，可以创建各种复杂的图形效果，如模糊、发光、阴影、颜色调整等。滤镜通过 <filter> 元素定义，并可以应用于 SVG 中的任何图形元素

<filter> 是定义滤镜效果的容器元素，所有滤镜效果都在其中定义：

html

<filter id="filterId" [属性...]><!-- 滤镜效果定义 --></filter>

常用属性：

属性	描述	取值	默认值
`id`	滤镜唯一标识符	字符串	必需
`x`	滤镜应用区域的左边界	数值（默认为-10%）	-10%
`y`	滤镜应用区域的上边界	数值（默认为-10%）	-10%
`width`	滤镜应用区域的宽度	数值（默认为 120%）	120%
`height`	滤镜应用区域的高度	数值（默认为 120%）	120%
`filterUnits`	坐标系单位	"userSpaceOnUse" 或 "objectBoundingBox"	"objectBoundingBox"
`primitiveUnits`	原始单位	"userSpaceOnUse" 或 "objectBoundingBox"	"userSpaceOnUse"

示例：

html

<svg width="400" height="300">
  <defs>
    <filter id="myFilter" x="-20%" y="-20%" width="140%" height="140%">
      <!-- 滤镜效果将在这里定义 -->
    </filter>
  </defs>

  <rect x="50" y="50" width="300" height="200" fill="blue" filter="url(#myFilter)" />
</svg>

颜色调整滤镜

`feColorMatrix` 颜色矩阵变换

功能： 通过矩阵变换调整颜色通道

属性：

属性	描述	取值
`type`	滤镜类型	"matrix"
`values`	4x5 矩阵值	20 个数值，用空格分隔

示例：

html

<svg width="400" height="300">
  <defs>
    <filter id="grayscale">
      <feColorMatrix
        type="matrix"
        values="0.33 0.33 0.33 0 0
                0.33 0.33 0.33 0 0
                0.33 0.33 0.33 0 0
                0    0    0    1 0" />
    </filter>

    <filter id="sepia">
      <feColorMatrix
        type="matrix"
        values="0.393 0.769 0.189 0 0
                0.349 0.686 0.168 0 0
                0.272 0.534 0.131 0 0
                0     0     0     1 0" />
    </filter>
  </defs>

  <rect x="50" y="50" width="150" height="150" fill="red" filter="url(#grayscale)" />
  <rect x="250" y="50" width="150" height="150" fill="red" filter="url(#sepia)" />
</svg>

`feComponentTransfer` 颜色分量传递

功能： 调整颜色的各个分量（红、绿、蓝、透明度）

子元素：

feFuncR - 红色分量调整
feFuncG - 绿色分量调整
feFuncB - 蓝色分量调整
feFuncA - 透明度分量调整

类型属性：

类型	描述
linear	线性变换
table	表格查找
discrete	离散值
gamma	伽马校正

示例：

html

<svg width="400" height="300">
  <defs>
    <filter id="brightness">
      <feComponentTransfer>
        <feFuncR type="linear" slope="1.5" intercept="-0.2" />
        <feFuncG type="linear" slope="1.5" intercept="-0.2" />
        <feFuncB type="linear" slope="1.5" intercept="-0.2" />
      </feComponentTransfer>
    </filter>

    <filter id="contrast">
      <feComponentTransfer>
        <feFuncR type="linear" slope="2" intercept="-0.5" />
        <feFuncG type="linear" slope="2" intercept="-0.5" />
        <feFuncB type="linear" slope="2" intercept="-0.5" />
      </feComponentTransfer>
    </filter>
  </defs>

  <rect
    x="50"
    y="50"
    width="150"
    height="150"
    fill="blue"
    filter="url(#brightness)" />
  <rect
    x="250"
    y="50"
    width="150"
    height="150"
    fill="blue"
    filter="url(#contrast)" />
</svg>

模糊与锐化滤镜

`feGaussianBlur` 高斯模糊

功能： 创建模糊效果

属性	描述	取值
`stdDeviation`	标准差（模糊程度）	数值或 "x y"

示例：

html

<svg width="400" height="300">
  <defs>
    <filter id="blur">
      <feGaussianBlur stdDeviation="5" />
    </filter>

    <filter id="motionBlur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10 0" result="blurX" />
      <feGaussianBlur in="SourceGraphic" stdDeviation="0 10" result="blurY" />
      <feMerge>
        <feMergeNode in="blurX" />
        <feMergeNode in="blurY" />
      </feMerge>
    </filter>
  </defs>

  <rect x="50" y="50" width="150" height="150" fill="green" filter="url(#blur)" />
  <rect
    x="250"
    y="50"
    width="150"
    height="150"
    fill="green"
    filter="url(#motionBlur)" />
</svg>

`feConvolveMatrix` 卷积矩阵

功能： 高级模糊和锐化效果

属性	描述	取值
`kernelMatrix`	卷积核矩阵	数值矩阵
`divisor`	除数	数值（默认为矩阵元素和）
`bias`	偏移量	数值（默认为 0）

示例：

html

<svg width="400" height="300">
  <defs>
    <!-- 锐化滤镜 -->
    <filter id="sharpen">
      <feConvolveMatrix order="3" kernelMatrix="0 -1 0 -1 5 -1 0 -1 0" divisor="1" />
    </filter>

    <!-- 边缘检测 -->
    <filter id="edgeDetect">
      <feConvolveMatrix order="3" kernelMatrix="0 1 0 1 -4 1 0 1 0" divisor="-1" />
    </filter>
  </defs>

  <rect
    x="50"
    y="50"
    width="150"
    height="150"
    fill="purple"
    filter="url(#sharpen)" />
  <rect
    x="250"
    y="50"
    width="150"
    height="150"
    fill="purple"
    filter="url(#edgeDetect)" />
</svg>

阴影与发光滤镜

`feDropShadow` 阴影（SVG2）

功能： 创建阴影效果

属性	描述	取值
`dx`	阴影水平偏移	数值
`dy`	阴影垂直偏移	数值
`stdDeviation`	模糊程度	数值
`flood-color`	阴影颜色	颜色值
`flood-opacity`	阴影透明度	0-1

示例：

html

<svg width="400" height="300">
  <defs>
    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow
        dx="5"
        dy="5"
        stdDeviation="3"
        flood-color="black"
        flood-opacity="0.5" />
    </filter>

    <filter id="glow">
      <feDropShadow
        dx="0"
        dy="0"
        stdDeviation="5"
        flood-color="yellow"
        flood-opacity="0.8" />
    </filter>
  </defs>

  <rect x="50" y="50" width="150" height="150" fill="orange" filter="url(#shadow)" />
  <circle cx="200" cy="150" r="70" fill="red" filter="url(#glow)" />
</svg>

`feGlow` 发光效果

功能： 创建发光效果（通过组合滤镜实现）

html

<svg width="400" height="300">
  <defs>
    <filter id="glowEffect">
      <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
      <feFlood flood-color="yellow" flood-opacity="0.8" result="glowColor" />
      <feComposite in="glowColor" in2="blur" operator="in" result="coloredBlur" />
      <feMerge>
        <feMergeNode in="coloredBlur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>

  <circle cx="200" cy="150" r="70" fill="red" filter="url(#glowEffect)" />
</svg>

混合与遮罩滤镜

`feBlend` - 混合模式

功能： 混合两个输入源

属性	描述	取值
`mode`	混合模式	"normal", "multiply", "screen", "darken", "lighten", "overlay", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"

示例：

html

<svg width="400" height="300">
  <defs>
    <filter id="blend">
      <feBlend in="SourceGraphic" in2="BackgroundImage" mode="multiply" />
    </filter>

    <filter id="screenBlend">
      <feBlend in="SourceGraphic" in2="BackgroundImage" mode="screen" />
    </filter>
  </defs>

  <!-- 注意：BackgroundImage需要特殊设置才能工作 -->
  <rect x="50" y="50" width="150" height="150" fill="blue" filter="url(#blend)">
    <animate
      attributeName="filter"
      values="url(#blend);none;url(#blend)"
      dur="3s"
      repeatCount="indefinite" />
  </rect>

  <rect
    x="250"
    y="50"
    width="150"
    height="150"
    fill="red"
    filter="url(#screenBlend)">
    <animate
      attributeName="filter"
      values="url(#screenBlend);none;url(#screenBlend)"
      dur="3s"
      repeatCount="indefinite" />
  </rect>
</svg>

注意： feBlend 的 BackgroundImage 输入通常需要特殊设置才能工作，实际应用中更常用的是 feComposite 或 feMerge。

`feComposite` - 复合操作

功能： 根据特定规则组合两个输入源

属性：

属性	描述	取值
`operator`	操作类型	"over", "in", "out", "atop", "xor", "arithmetic"

示例：

html

<svg width="400" height="300">
  <defs>
    <filter id="composite">
      <feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>

    <filter id="arithmeticComposite">
      <feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur" />
      <feComposite
        in="SourceGraphic"
        in2="blur"
        operator="arithmetic"
        k1="0"
        k2="1"
        k3="1"
        k4="0" />
    </filter>
  </defs>

  <rect
    x="50"
    y="50"
    width="150"
    height="150"
    fill="green"
    filter="url(#composite)" />
  <rect
    x="250"
    y="50"
    width="150"
    height="150"
    fill="purple"
    filter="url(#arithmeticComposite)" />
</svg>

高级滤镜组合

滤镜应用技巧

滤镜性能优化：

限制滤镜区域：通过设置 x, y, width, height 属性减少处理区域
简化滤镜链：减少滤镜数量和复杂度
缓存结果：对静态元素使用 filterRes 属性（已废弃，但某些浏览器仍支持）
分层处理：将复杂滤镜分解为多个简单滤镜

滤镜组合技巧：

使用 feMerge 合并结果：

html

<filter id="combined">
  <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
  <feColorMatrix in="blur" type="matrix" values="..." result="colorized" />
  <feMerge>
    <feMergeNode in="colorized" />
    <feMergeNode in="SourceGraphic" />
  </feMerge>
</filter>

使用 feComposite 控制混合：

html

<filter id="compositeEffect">
  <feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur" />
  <feFlood flood-color="yellow" flood-opacity="0.5" result="glow" />
  <feComposite in="glow" in2="blur" operator="in" result="coloredBlur" />
  <feComposite in="SourceGraphic" in2="coloredBlur" operator="over" />
</filter>

滤镜与动画结合：示例：动态发光效果

html

<svg width="400" height="300">
  <defs>
    <filter id="animatedGlow">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur">
        <animate
          attributeName="stdDeviation"
          values="3;5;3"
          dur="2s"
          repeatCount="indefinite" />
      </feGaussianBlur>
      <feFlood flood-color="red" flood-opacity="0.5" result="glowColor" />
      <feComposite in="glowColor" in2="blur" operator="in" result="coloredBlur" />
      <feMerge>
        <feMergeNode in="coloredBlur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>

  <circle cx="200" cy="150" r="70" fill="blue" filter="url(#animatedGlow)" />
</svg>

综合示例：

滤镜

颜色调整滤镜

feColorMatrix 颜色矩阵变换

feComponentTransfer 颜色分量传递

模糊与锐化滤镜

feGaussianBlur 高斯模糊

feConvolveMatrix 卷积矩阵

阴影与发光滤镜

feDropShadow 阴影（SVG2）

feGlow 发光效果

混合与遮罩滤镜

feBlend - 混合模式

feComposite - 复合操作

高级滤镜组合

滤镜应用技巧

`feColorMatrix` 颜色矩阵变换

`feComponentTransfer` 颜色分量传递

`feGaussianBlur` 高斯模糊

`feConvolveMatrix` 卷积矩阵

`feDropShadow` 阴影（SVG2）

`feGlow` 发光效果

`feBlend` - 混合模式

`feComposite` - 复合操作