filter - SVG 编辑

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

用法

类别	无
允许的内容物	任意数量、任意排序的下列元素： 描述性元素 滤镜元素 <animate>, <set>

属性

全局属性

• 核心属性 »
• 外观属性 »
• XLink属性 »
• class
• style
• externalResourcesRequired

专有属性

• x
• y
• width
• height
• filterRes
• filterUnits
• primitiveUnits
• xlink:href

DOM接口

该元素实现了SVGFilterElement接口。

示例：

SVG

<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>

结果

Screenshot	Live sample

说明

Specification	Status	Comment
Filter Effects Module Level 1 <filter>	Working Draft
Scalable Vector Graphics (SVG) 1.1 (Second Edition) <filter>	Recommendation	Initial definition

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

• Desktop
• Mobile

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

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	(Yes)	4.0 (2.0)	未实现	9.5	3.0[1]

[1] 在Webkit浏览器上存在一些问题。

该表格基于这些资源。

参见

• <feBlend>
• <feColorMatrix>
• <feComponentTransfer>
• <feComposite>
• <feConvolveMatrix>
• <feDiffuseLighting>
• <feDisplacementMap>
• <feFlood>
• <feGaussianBlur>
• <feImage>
• <feMerge>
• <feMorphology>
• <feOffset>
• <feSpecularLighting>
• <feTile>
• <feTurbulence>
• SVG教程：滤镜效果