本文详解如何通过纯 css 为 svg 中的任意 `
在现代网页装饰设计中，SVG 路径（
关键在于两点：
✅ 正确设置 transform-origin，确保旋转锚点精准落在 SVG 坐标系的几何中心；
✅ 使用 @keyframes 定义 0° → 360° 的线性循环动画，并通过 animation 属性启用无限播放。
以下是一个可直接运行的完整示例。我们为原 SVG 中两条装饰性曲线（即两个
.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% 配合 实现响应式居中，但固定像素值在静态 SVG 中更可控、更易调试。
同时，为避免旋转过程中路径被 SVG 边界裁剪，需适当扩大 viewBox 的可视区域。原 viewBox="0 0 156 142" 过于紧凑，建议调整为 viewBox="0 -15 160 170"（上扩 15px，宽高各+4px），为旋转留出安全边距：
✅ 优势总结：
立即学习“前端免费学习笔记（深入）”；
- 零 JS 依赖：完全基于 CSS，加载快、无执行阻塞；
- 硬件加速：transform 触发 GPU 渲染，动画流畅不掉帧；
- 易于定制：修改 animation-duration 即可调节转速（如 8s 加快，20s 减缓）；
- 可复用性强：同一动画规则可应用于多个路径，仅需添加类名。
⚠️ 注意事项：
- 若 SVG 嵌入方式为
标签或 CSS background-image，则无法通过外部 CSS 控制内部元素——务必使用内联 SVG（即直接将
- transform-origin 必须使用 SVG 坐标系单位（px 或 %），不可混用视口单位（如 vw）；
- 如需暂停/播放控制，可通过 JS 切换 animation-play-state，但基础循环推荐纯 CSS 方案以保障健壮性。
掌握这一技巧后，你不仅能轻松实现旋转装饰线，还可延伸至 SVG 图标自转、加载指示器、数据可视化动效等场景——简洁，却极具表现力。
