<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,
body,
svg {
  height: 100%;
  margin: 0;
  padding: 0;
}

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>

属性

动画属性

动画时间属性: begin、dur、end、min、max、restart、repeatCount、repeatDur、fill
动画取值属性: calcMode、values、keyTimes、keySplines、from、to、by
其他动画属性: 最主要的有：attributeName、additive、accumulate
动画事件属性: 最主要的有：onbegin、onend、onrepeat

使用说明

该元素实现了 SVGAnimateElement 接口。

无障碍说明

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

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

规范

Specification
SVG Animations Level 2 # AnimateElement

浏览器兼容性

BCD tables only load in the browser