本文介绍如何使用 svg 原生 `
在 SVG 动画中，若需让多个 <path> 元素围绕同一固定中心点（例如画布几何中心）以不同速度旋转，最简洁、高效且符合 Web 标准的方式是：为每个路径所在的 <g> 容器（或直接为 <path>）添加独立的 <animateTransform> 元素，并统一指定 from 和 to 的旋转中心坐标。
关键要点如下：
- ✅ 旋转中心必须显式声明：from="0 cx cy" 和 to="360 cx cy" 中的 cx cy 是绝对坐标（相对于 SVG 根元素的 viewBox），决定了所有旋转的锚点。本例中 80 80 对应 viewBox="0 0 160 160" 的中心，确保路径绕画布中心转动。
- ✅ 速度由 dur 属性独立控制：path1 设置 dur="1.00s" 实现每秒一转；path2 设置 dur="3.00s" 则三秒一转——两者互不干扰。
- ✅ 动画绑定在容器 <g> 上更合理：将 <animateTransform> 直接置于 <g id="first"> 或 <g id="second"> 内部，使整个组（含路径）统一变换，语义清晰且避免路径自身坐标系干扰。
以下是可直接运行的完整示例代码：
<svg width="160" height="160" viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg">
<!-- 第一组：红色路径，1秒完成360°旋转 -->
<g id="first">
<path id="path1" fill="#ed1c24" opacity="1" d="M7.01 7.01 C104.67 6.99 202.33 6.99 299.99 7.01 C300.01 104.67 300.01 202.33 299.99 299.99 C202.33 300.00 104.67 300.01 7.01 299.99 C7.00 202.33 6.99 104.67 7.01 7.01 M33.01 32.01 C32.99 113.67 32.99 195.33 33.01 276.99 C114.00 277.01 195.00 277.01 275.99 276.99 C276.01 195.33 276.00 113.67 275.99 32.01 C195.00 31.99 114.00 31.99 33.01 32.01 Z" />
<animateTransform
attributeName="transform"
type="rotate"
from="0 80 80"
to="360 80 80"
begin="0s"
dur="1.00s"
repeatCount="indefinite" />
</g>
<!-- 第二组：黑色路径，3秒完成360°旋转 -->
<g id="second">
<path id="path2" fill="#000000" opacity="1" d="M153.11 60.95 C153.80 60.95 155.19 60.95 155.89 60.95 C164.16 84.01 170.90 107.63 178.27 131.00 C193.87 131.15 209.34 132.65 225.03 131.99 C231.77 133.78 238.79 132.61 245.68 133.11 C247.47 134.01 247.60 136.84 245.75 137.75 C228.10 151.08 210.95 165.34 193.10 178.24 C200.20 200.70 205.97 223.63 212.89 246.17 C213.90 248.26 211.70 251.09 209.51 249.75 C191.40 237.05 173.47 224.11 155.49 211.23 C154.51 210.75 153.61 210.91 152.79 211.69 C135.34 224.34 117.79 236.83 100.20 249.29 C98.13 251.48 94.85 248.71 96.11 246.17 C103.03 223.63 108.79 200.70 115.90 178.24 C98.05 165.34 80.90 151.08 63.25 137.75 C61.40 136.84 61.52 134.01 63.32 133.12 C70.21 132.61 77.23 133.78 83.97 131.99 C99.66 132.65 115.13 131.15 130.73 131.00 C138.19 107.66 144.91 84.03 153.11 60.95 Z" />
<animateTransform
attributeName="transform"
type="rotate"
from="0 80 80"
to="360 80 80"
begin="0s"
dur="3.00s"
repeatCount="indefinite" />
</g>
</svg>⚠️ 注意事项与最佳实践：
- 确保 viewBox 尺寸与 from/to 中的中心坐标匹配（如 viewBox="0 0 160 160" → 中心为 80 80）；
- 不要将 <animateTransform> 放在 <svg> 根层级，否则会作用于整个 SVG，失去路径级控制；
- 若需延迟启动某条路径（如 path2 在 path1 开始后 0.5 秒再动），可修改 begin="0.5s"；
- 所有现代浏览器均原生支持该语法（Chrome/Firefox/Safari/Edge），无需 polyfill；
- 如需更复杂交互动画（如点击暂停、变速），建议配合 SMIL 的 begin="click" 或迁移到 CSS @keyframes + transform-origin（但需注意路径需转为 display: block 并包裹在定位容器中）。
通过此方法，你可在零 JS 依赖下，精准、轻量、可维护地实现多路径差异化 SVG 旋转动画。
