SVG 动画
SVG 动画常见有三条路线：CSS、SMIL、JavaScript。选择哪一种，核心取决于：你要不要“逐帧控制”、是否需要“时间轴/物理效果”、以及对兼容性与可维护性的偏好。
选型速查
| 方案 | 适合场景 | 优点 | 代价/注意点 |
|---|---|---|---|
| CSS 动画 | 简单位移/缩放/旋转、hover/状态切换 | 语法简单、性能好、易维护 | 复杂交互与时间轴能力弱 |
| SMIL 动画 | SVG 原生属性动画（例如 path、颜色过渡） | 写法直观、与 SVG 绑定紧 | 生态相对小；与 JS/组件化协作需要额外组织 |
| JavaScript 动画 | 复杂逻辑、物理效果、交互驱动、时间轴 | 控制力最强，可用库生态丰富 | 需要管理性能（requestAnimationFrame）与状态复杂度 |
深入阅读
- CSS 动画： css 动画
- SMIL： SMIL 动画简介
- JavaScript： JavaScript 动画
参考资料（MDN / mozilla）
- SVG（概览）：https://developer.mozilla.org/zh-CN/docs/Web/SVG
- CSS 动画（概览）：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animations
- Web 动画性能与调试建议（从开发者工具入口进入）：https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/WebExtensions