<animate>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

示例

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

属性

动画属性

使用说明

该元素实现了 SVGAnimateElement 接口。

无障碍说明

对于存在认知问题(如,患有注意缺陷多动障碍 (ADHD))的人来说,闪烁动画可能会引发一些问题。此外,某些动画可能会引起前庭相关疾病、癫痫、偏头痛和光敏综合征(Scotopic sensitivity)。

考虑提供一种暂停或禁用动画的机制,并配合使用偏好减少动画的媒体查询来为不喜欢动画的用户提供更舒适的体验。

规范

Specification
SVG Animations Level 2
# AnimateElement

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
animate
attributeName
attributeType
dur
fill
from
href
repeatCount
systemLanguage
to

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support