filter

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2020 年 1 月⁩ 起,所有主流浏览器均已支持。

filter 属性指定了由 <filter> 元素定义的、将应用于其元素的滤镜效果。

注意: 作为演示属性,filter 也有一个对应的 CSS 属性:filter。当两者都被指定时,CSS 属性具有更高的优先级。

从技术上讲,filter 可以应用于任何元素,但它只对不带 <defs> 元素的 容器元素、所有 图形元素 以及 <use> 元素有效果。

示例

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

浏览器兼容性

另见