<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 表格仅在浏览器中加载