非常教程

SVG参考手册

分类 | Elements

animate

animate元素放在一个形状元素中,并定义元素的属性如何改变动画。该属性将在指定的时间内从初始值变为结束值。

用法上下文

分类

动画元素

允许的内容

任意数量的以下元素,以任何顺序:描述性元素

属性

全局属性

  • Conditional processing attributes »
  • Core attributes »
  • Animation event attributes »
  • Xlink attributes »
  • Animation attribute target attributes »
  • Animation timing attributes »
  • Animation value attributes »
  • Animation addition attributes »
  • externalResourcesRequired

具体属性

  • attributeName
  • attributeType
  • from
  • to
  • dur
  • repeatCount

DOM接口

这个元素实现了SVGAnimateElement接口。

SVG

<?xml version="1.0"?>
<svg width="120" height="120" viewPort="0 0 120 120" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  
  <rect x="10" y="10" width="100" height="100">
    <animate attributeType="XML" attributeName="x" from="-100" to="120"
        dur="10s" repeatCount="indefinite"/>
  </rect>
</svg>

结果

产品规格

Specification

Status

Comment

SVG Animations Level 2The definition of '<animate>' in that specification.

Editor's Draft

No change

Scalable Vector Graphics (SVG) 1.1 (Second Edition)The definition of '<animate>' in that specification.

Recommendation

Initial definition

浏览器兼容性

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

Basic support

2.0

4.0 (2.0)

No support

9.0

4.0

Feature

Android

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Basic support

?

4.0 (2.0)

No support

9.5

4.0

SVG

可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。