<animate>

SVG 的<animate>元素提供了一种方法,可以在一段时间内对元素的属性进行动画处理。

示例

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))的人造成问题。此外,某些类型的运动可能是前庭障碍、癫痫、偏头痛和暗视症的诱因。

考虑提供暂停或禁用动画的机制,以及使用减少运动媒体查询或等效的用户代理客户端提示Sec-CH-Prefers-Reduced-Motion为表示希望没有动画体验的用户创建互补体验。

规范

规范
SVG 动画级别 2
# AnimateElement

浏览器兼容性

BCD 表格仅在浏览器中加载