SVG 模糊效果通过 feGaussianBlur 元素来实现。该效果可以对图形元素进行模糊处理，模拟出焦外效果或者为图形添加柔和的外观。模糊程度可以通过 stdDeviation 属性进行控制，数值越大，模糊效果越明显。

目录

  1. 基本语法
  2. 模糊效果应用示例
  3. feGaussianBlur 属性详解
  4. 模糊效果的实际应用
  5. 参考资料
  6. 出站链接

基本语法

在 SVG 中应用模糊效果时，首先需要定义一个 <filter> 元素，并在其中使用 feGaussianBlur 元素来设置模糊参数。然后，将该滤镜应用到一个图形元素上。

<svg width="200" height="200">
  <defs>
    <filter id="blurEffect">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
    </filter>
  </defs>
  <circle cx="100" cy="100" r="50" stroke="black" stroke-width="3" fill="red" filter="url(#blurEffect)" />
</svg>
  • <filter>：定义滤镜效果的容器。
  • id="blurEffect"：指定滤镜的 ID，用于引用该滤镜。
  • <feGaussianBlur>：应用模糊效果。
    • in="SourceGraphic"：指定输入源为图形元素。
    • stdDeviation="10"：控制模糊的程度，数值越大，模糊效果越强。

模糊效果应用示例

1. 简单的模糊效果

这是一个基本的模糊效果示例，它将 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="5"：设置模糊效果的强度，数值较小会产生轻微的模糊效果。

2. 强烈的模糊效果

<svg width="200" height="200">
  <defs>
    <filter id="strongBlur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <circle cx="100" cy="100" r="50" fill="green" filter="url(#strongBlur)" />
</svg>
  • stdDeviation="15"：模糊强度增大，图形变得更加模糊。

3. 多重模糊效果

可以将多个模糊效果结合使用，以产生更复杂的视觉效果。

<svg width="200" height="200">
  <defs>
    <filter id="multiBlur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
      <feGaussianBlur in="SourceAlpha" stdDeviation="10" />
    </filter>
  </defs>
  <circle cx="100" cy="100" r="50" fill="purple" filter="url(#multiBlur)" />
</svg>
  • 通过多个 <feGaussianBlur> 元素，可以创建不同程度的模糊效果，产生更柔和的外观。

feGaussianBlur 属性详解

  • in：指定输入源，可以是 SourceGraphic、SourceAlpha 等。
    • SourceGraphic：表示图形元素本身。
    • SourceAlpha：表示图形元素的透明度信息，用于透明度模糊效果。
  • stdDeviation：控制模糊效果的程度，数值越大，模糊效果越明显。标准差（stdDeviation）是模糊的核心参数，它影响模糊的范围和强度。示例：
    • stdDeviation="5"：轻度模糊。
    • stdDeviation="15"：强烈模糊。
  • result（可选）：指定该滤镜操作的输出结果的名称。可以在后续的滤镜步骤中引用。

模糊效果的实际应用

  1. 模糊背景：可以使用模糊效果为图形添加背景模糊，使前景图形更加突出。<svg width="400" height="400"> <defs> <filter id="backgroundBlur"> <feGaussianBlur in="SourceGraphic" stdDeviation="8" /> </filter> </defs> <rect x="50" y="50" width="300" height="300" fill="yellow" filter="url(#backgroundBlur)" /> </svg>
  2. 图形阴影：通过模糊效果，可以为图形添加柔和的阴影，使其看起来更有立体感。<svg width="200" height="200"> <defs> <filter id="shadowBlur"> <feGaussianBlur in="SourceAlpha" stdDeviation="10" result="blurredAlpha" /> <feOffset in="blurredAlpha" dx="5" dy="5" result="offsetBlur" /> <feFlood flood-color="black" result="color" /> <feComposite in2="offsetBlur" operator="in" /> <feComposite in2="color" operator="in" /> <feComposite in2="SourceAlpha" operator="in" /> </filter> </defs> <circle cx="100" cy="100" r="50" fill="red" filter="url(#shadowBlur)" /> </svg> 通过这种方式，模糊效果与其他滤镜组合使用，生成阴影效果。

参考资料

出站链接

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