filter

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流瀏覽器均已支援。

filter 屬性指定了由 <filter> 元素定義的、將應用於其元素的濾鏡效果。

注意： 作為演示屬性，filter 也有一個對應的 CSS 屬性：filter。當兩者都被指定時，CSS 屬性具有更高的優先順序。

從技術上講，filter 可以應用於任何元素，但它只對不帶 <defs> 元素的容器元素、所有圖形元素以及 <use> 元素有效果。

示例

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <filter id="blur">
    <feGaussianBlur stdDeviation="2" />
  </filter>

  <rect x="10" y="10" width="80" height="80" filter="url(#blur)" />
</svg>

用法說明

值	`none` \| `<filter-value-list>`
預設值	`none`
可動畫的	是

有關值的描述，請參閱 CSS filter 屬性。

規範

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

瀏覽器相容性

另見

<filter>
CSS filter 屬性

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ⁨2025 年 10 月 10 日⁩，由 MDN 貢獻者修改。

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