<filter>

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

* 此特性的某些部分可能存在不同級別的支援。

<filter> SVG 元素透過組合原子濾鏡圖元來定義自定義濾鏡效果。它本身永遠不會被渲染，但必須透過 SVG 元素的 filter 屬性，或者 SVG/HTML 元素的 filter CSS 屬性來使用。

使用語境

分類	None
允許內容	可包含任意數量、任意順序的下列元素描述性元素濾鏡圖元元素 `<animate>`、`<discard>`、`<set>`

屬性

DOM 介面

此元素實現了 SVGFilterElement 介面。

示例

SVG

html

<svg width="230" height="120" xmlns="http://www.w3.org/2000/svg">
  <filter id="blurMe">
    <feGaussianBlur 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>

結果

規範

規範
濾鏡效果模組第 1 級 # FilterElement

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者於 2025年3月18日修改。

在 GitHub 上檢視此頁面 • 報告此內容的可能問題