animate - SVG 编辑

动画元素放在形状元素的内部，用来定义一个元素的某个属性如何踩着时点改变。在指定持续时间里，属性从开始值变成结束值。

html,body,svg { height:100%; margin:0; padding:0; }

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect width="10" height="10">
    <animate attributeName="rx" values="0;5;0" dur="10s" repeatCount="indefinite" />
  </rect>
</svg>

属性

全局属性

• 条件处理属性 »
• 核心属性 »
• 动画事件属性 »
• Xlink属性 »
• 动画属性目标属性 »
• 动画定时属性 »
• 动画值属性 »
• 动画累加属性 »
• externalResourcesRequired

专有属性

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

用法

该元素实现了 SVGAnimateElement 接口

该元素实现了SVGAnimateElement 接口。

Accessibility concerns

Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity.

Consider providing a mechanism for pausing or disabling animation, as well as using the Reduced Motion Media Query to create a complimentary experience for users who have expressed a preference for no animated experiences.

• Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article
• An Introduction to the Reduced Motion Media Query | CSS-Tricks
• Responsive Design for Motion | WebKit
• MDN Understanding WCAG, Guideline 2.2 explanations
• Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0

规范

Specification	Status	Comment
SVG Animations Level 2 <animate>	Editor's Draft	No change
Scalable Vector Graphics (SVG) 1.1 (Second Edition) <animate>	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 (WebKit)
Basic support	2.0	4.0 (2.0)	未实现	9.0	4.0

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	4.0 (2.0)	未实现	9.5	4.0

该表格基于这些资源。