SVG 动画

SVG 动画常见有三条路线：CSS、SMIL、JavaScript。选择哪一种，核心取决于：你要不要“逐帧控制”、是否需要“时间轴/物理效果”、以及对兼容性与可维护性的偏好。

选型速查

方案	适合场景	优点	代价/注意点
CSS 动画	简单位移/缩放/旋转、hover/状态切换	语法简单、性能好、易维护	复杂交互与时间轴能力弱
SMIL 动画	SVG 原生属性动画（例如 path、颜色过渡）	写法直观、与 SVG 绑定紧	生态相对小；与 JS/组件化协作需要额外组织
JavaScript 动画	复杂逻辑、物理效果、交互驱动、时间轴	控制力最强，可用库生态丰富	需要管理性能（requestAnimationFrame）与状态复杂度

方案	适合场景	优点	代价/注意点
CSS 动画	简单位移/缩放/旋转、hover/状态切换	语法简单、性能好、易维护	复杂交互与时间轴能力弱
SMIL 动画	SVG 原生属性动画（例如 path、颜色过渡）	写法直观、与 SVG 绑定紧	生态相对小；与 JS/组件化协作需要额外组织
JavaScript 动画	复杂逻辑、物理效果、交互驱动、时间轴	控制力最强，可用库生态丰富	需要管理性能（requestAnimationFrame）与状态复杂度