SVG 模糊效果

<defs> 和 <filter>

所有 SVG 濾鏡都在 <defs> 元素中定義。<defs> 元素是定義（definitions）的縮寫，包含對特殊元素（比如濾鏡）的定義。

<filter> 元素用于定義 SVG 濾鏡。<filter> 元素有一個必需的 id 屬性，用于標識濾鏡。然后圖形會指向要使用的濾鏡。

SVG <feGaussianBlur>

例子 1

<feGaussianBlur> 元素用于創建模糊效果：

這是 SVG 代碼：

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

親自試一試

代碼解釋：

  • <filter> 元素的 id 屬性定義了濾鏡的唯一名稱
  • <feGaussianBlur> 元素定義模糊效果
  • in="SourceGraphic" 定義為整個元素創建的效果
  • stdDeviation 屬性定義模糊量
  • <rect> 元素的 filter 屬性將該元素鏈接到 "f1" 濾鏡