首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

filter

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

用法上下文

分类

没有

允许的内容

以任意顺序包含任意数量的以下元素:描述性元素过滤元素<animate>,<set>

属性

全局属性

  • Core attributes
  • Presentation attributes
  • XLink attributes
  • class
  • style
  • externalResourcesRequired

具体属性

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

DOM接口

这个元素实现了SVGFilterElement接口。

SVG

代码语言:javascript
复制
<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

扫码关注腾讯云开发者

领取腾讯云代金券