<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>
属性
动画属性
全局属性
- 核心属性 (en-US)
-
最主要的有:
id
- 样式属性
class (en-US)
、style
- 事件属性
用法
该元素实现了 SVGAnimateElement
接口。
无障碍说明
对于存在认知问题(如,患有注意缺陷多动障碍 (ADHD))的人来说,闪烁动画可能会引发一些问题。此外,某些动画可能会引起前庭相关疾病、癫痫、偏头痛和光敏综合征(Scotopic sensitivity)。
考虑提供一种暂停或禁用动画的机制,并配合使用偏好减少动画的媒体查询来为不喜欢动画的用户提供更舒适的体验。
- 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 (en-US)
- Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0
规范
Specification |
---|
SVG Animations Level 2 # AnimateElement |
浏览器兼容性
BCD tables only load in the browser