SVG 模糊效果

SVG 模糊效果:

和 元素回顾

提醒一下，所有 SVG 滤镜效果（filter effects）都定义在 <defs> 元素内。<defs>（definitions，定义）标签用于存放可重用的定义。

<filter> 元素本身定义了一个特定的滤镜效果。它必须有一个 id 属性，图形元素可以通过 filter 属性引用并应用这个滤镜（例如：filter="url(#myFilter)"）。

滤镜原语

示例 1: 应用高斯模糊

<feGaussianBlur> 滤镜原语（filter primitive）对输入图像应用模糊效果。模糊的程度由 stdDeviation 属性控制。

视觉输出描述：这个 SVG 将渲染一个带有绿色边框的黄色矩形。整个矩形，包括其边框，都会显得显著模糊，边缘柔和、不清晰。

SVG 代码：

<svg width="150" height="150" viewBox="0 0 110 110">
  <defs>
    <filter id="f1" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</svg>

代码解释：

• <filter id=“f1” …>: 定义滤镜。滤镜上的 x, y, width, height 属性定义了滤镜效果区域。通常建议将此区域设置得比目标元素更大，以便容纳模糊效果。
• <feGaussianBlur … />: 高斯模糊原语。
• in=“SourceGraphic”: 指定模糊的输入是应用滤镜的原始图形元素。
• in 的其他常用输入包括 SourceAlpha（只使用源图形的 Alpha 通道）、BackgroundImage、BackgroundAlpha、FillPaint、StrokePaint，或前一个滤镜原语的结果（使用其 result 属性值）。
• stdDeviation=“5”: 定义模糊操作的标准差。值越大，模糊越强烈。这可以是一个数字（表示 x 和 y 方向相同的模糊）或两个数字（表示 x 和 y 方向不同的模糊）。
• filter=“url(#f1)”: 应用于 <rect> 元素，将其与 ‘f1’ 滤镜定义关联起来。

实际应用：

<feGaussianBlur> 常用于：

• 创建柔和阴影（通常与 <feOffset> 和 <feMerge> 结合使用）。
• 营造景深感或聚焦/失焦效果。
• 柔化图形边缘。
• 创建发光效果（通过模糊对象的副本并叠加）。

学习技巧：尝试不同的 stdDeviation 值，看看它们的效果。出于性能考虑，请注意较大的模糊半径可能会消耗大量计算资源，特别是在复杂的图形或动画中。

关于 SVG 滤镜（包括 <feGaussianBlur>）的更多资源，可以在 MDN Web Docs 上找到。