如何为 SVG 路径设置独立旋转速度并固定旋转中心点_网络技术

发布时间 - 2025-12-30 00:00:00 点击率：次

本文介绍如何使用 svg 原生 `` 实现多个路径围绕同一中心点（如 `80 80`）以不同持续时间独立旋转，无需 javascript，兼容性好且语义清晰。

在 SVG 动画中，若需让多个元素围绕同一固定中心点（例如画布几何中心）以不同速度旋转，最简洁、高效且符合 Web 标准的方式是：为每个路径所在的容器（或直接为）添加独立的元素，并统一指定 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" 则三秒一转——两者互不干扰。
✅ 动画绑定在容器上更合理：将直接置于或内部，使整个组（含路径）统一变换，语义清晰且避免路径自身坐标系干扰。

以下是可直接运行的完整示例代码：

⚠️ 注意事项与最佳实践：

确保 viewBox 尺寸与 from/to 中的中心坐标匹配（如 viewBox="0 0 160 160" → 中心为 80 80）；
不要将放在
若需延迟启动某条路径（如 path2 在 path1 开始后 0.5 秒再动），可修改 begin="0.5s"；
所有现代浏览器均原生支持该语法（Chrome/Firefox/Safari/Edge），无需 polyfill；
如需更复杂交互动画（如点击暂停、变速），建议配合 SMIL 的 begin="click" 或迁移到 CSS @keyframes + transform-origin（但需注意路径需转为 display: block 并包裹在定位容器中）。

通过此方法，你可在零 JS 依赖下，精准、轻量、可维护地实现多路径差异化 SVG 旋转动画。