SVG滤镜详解：feGaussianBlur, feBlend, feOffset等-优快云博客

本文介绍了SVG滤镜中的关键元素，包括feGaussianBlur的高斯模糊效果，feBlend的混合操作，feOffset的偏移量设置，feMerge和feMergeNode的融合功能，以及feColorMatrix的色彩矩阵变换。通过实例展示了各元素的属性和应用场景，详细解析了SVG滤镜的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SVG滤镜各元素解释.1

1. < feGaussianBlur >高斯模糊

可参考的链接[MDN]

实例1.1 代码如下

<svg width="230" height="120"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">

  <filter id="blurMe">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>

  <circle cx="60"  cy="60" r="50" fill="green" />

  <circle cx="170" cy="60" r="50" fill="green"
          filter="url(#blurMe)" />
</svg>

示例效果如下

< feGaussianBlur>的内属性“in”为SourceGraphic(源图像，或表示滤镜效果参照来自在源图像)；

“setDeviation”属性表示模糊范围。

< filter>标签通过”xlink:href”进行引用

实例1.2 代码如下

<svg width="120" height="120"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">

  <filter id="dropShadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
    <feOffset dx="2" dy="4" />
    <feMerge>
        <feMergeNode />
        <feMergeNode in="SourceGraphic" />
    </feMerge>
  </filter>

  <circle cx="60"  cy="60" r="50" fill="green"
          filter="url(#dropShadow)" />
</svg>

“in”属性为“SourceAlpha”。

恩，据我初步分析,SourceAlpha和SourceGraphic的区别在于，SourceGraphic的颜色是全彩，而SourceAlpha的颜色是提取了其中的黑色部分

< feOffset>和< feMerge>的功能我们之后再说

2. < feBlend>混合

可参考的链接[MDN]不过没有代码例子

实例2.1

<svg width="1000" height="500"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    <filter id="dropShadow1">
        <feGaussianBlur in="SourceAlpha" stdDeviation="3" out="gaussian1"/>
        <feOffset dx="10" dy="10"  />

        <feBlend  in="SourceGraphic" in2="gaussian1" mode="normal"></feBlend>

    </filter>
    <filter id="dropShadow2">
        <feGaussianBlur in="SourceAlpha" stdDeviation="3" out="gaussian1"/>
        <feOffset dx="10" dy="10"  />

        <feBlend  in2="SourceGraphic" in="gaussian1" mode="normal"></feBlend>

    </filter>
    <filter id="dropShadow3">
        <feGaussianBlur in="SourceAlpha" stdDeviation="3" out="gaussian1"/>
        <feOffset dx="10" dy="10"  />

        <feBlend  in2="SourceGraphic" in="gaussian1" mode="lighten"></feBlend>

    </filter>
    <filter id="dropShadow3">
        <feGaussianBlur in="SourceAlpha" stdDeviation="3" out="gaussian1"/>
        <feOffset dx="10" dy="10"  />

        <feBlend  in2="SourceGraphic" in="gaussian1" mode="lighten"></feBlend>

    </filter>
    <filter id="dropShadow4">
        <feGaussianBlur in="SourceAlpha" stdDeviation="3" out="gaussian1"/>
        <feOffset dx="10" dy="10"  />
    </filter>
    <filter id="dropShadow5">
        <feGaussianBlur in="SourceAlpha" stdDeviation="3" out="gaussian1"/>
        <feOffset dx="10" dy="10"  />

        <feBlend  in="gaussian1" mode="lighten"></feBlend>
        <feBlend  in="gaussian1" mode="lighten"></feBlend>
        <feBlend  in="gaussian1" mode="lighten"></feBlend>
        <feBlend  in="gaussian1" mode="lighten"></feBlend>
        <feBlend  in="gaussian1" mode="lighten"></feBlend>

    </filter>
    <circle cx="60"  cy="60" r="50" fill="red"
            filter="url(#dropShadow1)" />
    <circle cx="200"  cy="60" r="50" fill="red"
            filter="url(#dropShadow2)" />
    <circle cx="340"  cy="60" r="50" fill="red"
            filter="url(#dropShadow3)" />
    <