filter

<filter>

<filter>SVG元素用作原子滤波器操作的容器中。它永远不会被直接渲染。通过使用filter目标SVG元素上的属性或通过CSS属性来引用过滤器。filter

用法上下文

分类	没有
允许的内容	以任意顺序包含任意数量的以下元素：描述性元素过滤元素<animate>，<set>

属性

全局属性

Core attributes

Presentation attributes

XLink attributes

class

style

externalResourcesRequired

具体属性

width

height

filterRes

filterUnits

primitiveUnits

xlink:href

DOM接口

这个元素实现了SVGFilterElement接口。

例

SVG

<svg width="230" height="120"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">

 <filter id="blurMe">
  <feGaussianBlur in="SourceGraphic" 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>

结果

Screenshot	Live sample

产品规格

Specification	Status	Comment
Filter Effects Module Level 1The definition of '<filter>' in that specification.	Working Draft
Scalable Vector Graphics (SVG) 1.1 (Second Edition)The definition of '<filter>' in that specification.	Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	(Yes)	4.0 (2.0)	10.0	9.0	3.0

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	(Yes)	(Yes)	4.0 (2.0)	No support	9.5	3.01