本文详解如何为svg中的特定路径（如装饰性曲线）添加平滑、无限循环的旋转动画，重点解决`transform-origin`定位与 viewbox 适配等关键问题。
在网页装饰设计中，让SVG图形元素产生动态视觉效果能显著提升界面表现力。针对用户提供的双圆+两条手绘风格曲线的SVG结构，目标是让两条
✅ 核心实现原理
CSS animation 是最轻量、高性能的方案（优于JavaScript定时器或GSAP基础用法）。关键在于两点：
-
为需旋转的
添加类名 （如 rotating-lines），避免影响其他图形； - 精确设置 transform-origin：该值必须对应SVG坐标系中的物理旋转中心点（非页面像素），否则会出现偏移、裁切或“甩飞”现象。
观察原SVG的 viewBox="0 0 156 142"，其几何中心约为 (78, 71)。但因两条曲线实际围绕主圆群（橙色大圆中心约在 (78.6, 68.2)）运动，且需预留动画位移空间，实践中将 transform-origin 设为 80px 70px 更稳妥——此即CSS中以SVG左上角为原点的绝对坐标。
同时，必须扩大 viewBox 范围（如改为 "0 -15 160 170"），否则旋转过程中路径超出原始边界会被裁剪（SVG默认 overflow: hidden）。这是初学者最常见的失败原因。
立即学习“前端免费学习笔记（深入）”；
? 完整可运行代码
⚠️ 注意事项与优化建议
-
性能优先：仅对需动画的
应用 transform，避免给整个 - 坐标系一致性：transform-origin 的单位必须是 px（或 em 等相对单位），且数值基于 viewBox 定义的坐标系，不是CSS像素或屏幕位置；
- 动画时长调节：12s 提供舒缓节奏，若需更灵动效果，可降至 6s 或 8s，但避免低于 4s 以免眩晕；
- 响应式适配：如SVG需缩放，建议用 width: 100% + height: auto，并确保 viewBox 保持比例不变，transform-origin 值无需更改（因其基于 viewBox 坐标）；
- 降级兼容性：所有现代浏览器均支持 CSS @keyframes 和 SVG transform，IE11 需额外前缀（已不推荐适配）。
通过以上方法，你不仅能实现所见即所得的旋转装饰效果，更能掌握SVG动画的核心控制逻辑——精准的坐标定位 + 合理的容器边界管理 = 稳健可靠的动态视觉表达。
