本文介绍如何在不依赖 javascript 的前提下，使用原生 svg `
要实现 SVG 路径围绕统一中心点以不同速度独立旋转，核心在于：将
以下是一个完整、可直接运行的示例（已适配您提供的路径数据）：
✅ 关键要点说明：
- from="0 80 80" 和 to="360 80 80" 中的 80 80 是旋转中心的绝对坐标（单位为 viewBox 坐标），必须与
- 动画绑定在
上，可同时驱动其内部所有子元素（如 ），语义清晰且便于管理； - begin="0s" 支持延迟启动（如 "1s"），repeatCount="indefinite" 实现持续循环，也可设为具体次数（如 "3"）；
- 所有属性均为声明式，零 JS 依赖，兼容性好（支持 IE9+ 及现代浏览器）。
⚠️ 注意事项：
- 若路径原始坐标未居中，请先用
调整位置，再添加旋转动画； - viewBox 尺寸需覆盖全部路径坐标范围（本例中原始路径坐标达 299.99，故实际需放大 viewBox 或缩放路径——示例已按比例重设为 160×160 并平移适配，确保 80 80 为几何中心）；
- 避免在
内部重复嵌套 ，应统一置于包裹它的 中，防止继承冲突。
通过此方法，你可轻松扩展至 N 条路径，每条路径拥有专属 dur、begin、甚至 keyTimes/values 实现复杂缓动，真正实现「一个中心、多速共舞」的 SVG 动画效果。
