本文详解如何通过纯 css 为 svg 中的任意 `
在现代网页装饰设计中，SVG 路径（<path>）常被用作动态视觉元素——如弧线、引导线或装饰性曲线。当需要让这些路径围绕图形中心持续旋转时，许多开发者会误以为必须依赖 JavaScript 或复杂的 transform 手动计算，但实际上，纯 CSS 动画即可高效、简洁地实现这一效果。
关键在于两点：
✅ 正确设置 transform-origin，确保旋转锚点精准落在 SVG 坐标系的几何中心；
✅ 使用 @keyframes 定义 0° → 360° 的线性循环动画，并通过 animation 属性启用无限播放。
以下是一个可直接运行的完整示例。我们为原 SVG 中两条装饰性曲线（即两个 <path>）添加 .rotating-lines 类，并应用如下 CSS：
.rotating-lines {
animation: rotate 12s linear infinite;
transform-origin: 80px 70px; /* 对应 viewBox 中心点 (79.77, 67.47) 的近似值 */
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}? 为什么是 80px 70px？ 原 SVG 的 viewBox="0 0 156 142"，其中心坐标为 (78, 71)；结合视觉微调（如避免路径裁切），取 80px 70px 更贴合实际旋转焦点。你也可通过 transform-origin: 50% 50% 配合 <g transform="translate(...)"> 实现响应式居中，但固定像素值在静态 SVG 中更可控、更易调试。
同时，为避免旋转过程中路径被 SVG 边界裁剪，需适当扩大 viewBox 的可视区域。原 viewBox="0 0 156 142" 过于紧凑，建议调整为 viewBox="0 -15 160 170"（上扩 15px，宽高各+4px），为旋转留出安全边距：
<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 ... " fill="#E1E8EB"/>
<path d="M78.6071 106.451C99.7205 ... " fill="#FF7C04"/>
<!-- 添加 .rotating-lines 类的两条曲线 -->
<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"/>
<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>✅ 优势总结：
立即学习“前端免费学习笔记（深入）”；
- 零 JS 依赖：完全基于 CSS，加载快、无执行阻塞；
- 硬件加速：transform 触发 GPU 渲染，动画流畅不掉帧；
- 易于定制：修改 animation-duration 即可调节转速（如 8s 加快，20s 减缓）；
- 可复用性强：同一动画规则可应用于多个路径，仅需添加类名。
⚠️ 注意事项：
- 若 SVG 嵌入方式为 <img> 标签或 CSS background-image，则无法通过外部 CSS 控制内部元素——务必使用内联 SVG（即直接将 <svg> 写入 HTML）；
- transform-origin 必须使用 SVG 坐标系单位（px 或 %），不可混用视口单位（如 vw）；
- 如需暂停/播放控制，可通过 JS 切换 animation-play-state，但基础循环推荐纯 CSS 方案以保障健壮性。
掌握这一技巧后，你不仅能轻松实现旋转装饰线，还可延伸至 SVG 图标自转、加载指示器、数据可视化动效等场景——简洁，却极具表现力。
