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