本文详解如何为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）。这是初学者最常见的失败原因。
立即学习“前端免费学习笔记（深入）”；
? 完整可运行代码
<style>
.rotating-lines {
animation: rotate 12s linear infinite;
transform-origin: 80px 70px; /* 关键：匹配SVG坐标系中的旋转中心 */
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<svg width="156" height="142" viewBox="0 -15 160 170" fill="none" xmlns="http://www.w3.org/2000/svg">
<g>
<!-- 背景大圆 -->
<path d="M144.094 67.4748C144.094 75.9193 142.43 84.2811 139.197 92.0827C135.965 99.8842 131.226 106.973 125.253 112.943C119.28 118.913 112.189 123.649 104.385 126.879C96.5816 130.109 88.2177 131.771 79.7716 131.768C44.2485 131.768 12.9238 101.745 12.9238 66.1794C12.9238 30.6139 48.0205 0.410156 83.5437 0.410156C119.067 0.410156 144.094 31.942 144.094 67.4748Z" fill="#E1E8EB"/>
<!-- 主体橙色圆 -->
<path d="M78.6071 106.451C99.7205 106.451 116.836 89.3382 116.836 68.2288C116.836 47.1194 99.7205 30.0068 78.6071 30.0068C57.4937 30.0068 40.3779 47.1194 40.3779 68.2288C40.3779 89.3382 57.4937 106.451 78.6071 106.451Z" fill="#FF7C04"/>
<!-- 旋转曲线1（已添加class） -->
<path class="rotating-lines" d="M2.42712 52.3071C2.42712 52.3071 -8.97112 118.683 54.695 140.344" stroke="#343A40" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"/>
<!-- 旋转曲线2（已添加class） -->
<path class="rotating-lines" d="M125.151 1.63965C126.644 1.63965 157.148 26.1207 154.147 66.048" stroke="#343A40" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"/>
</g>
</svg>⚠️ 注意事项与优化建议
-
性能优先：仅对需动画的
应用 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动画的核心控制逻辑——精准的坐标定位 + 合理的容器边界管理 = 稳健可靠的动态视觉表达。
