filter

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

filter元素作用是作为原子滤镜操作的容器。它不能直接呈现。可以利用目标 SVG 元素上的filter属性引用一个滤镜。

使用上下文

类别无
允许的内容任意数量、任意顺序的下列元素：
描述性元素
滤镜元素
<animate>、<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>

结果

规范

Specification
Filter Effects Module Level 1
# FilterElement

浏览器兼容性

BCD tables only load in the browser

参见