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 上查看此页面 • 报告此内容的潜在问题