本文详解如何为 svg 中的 `
在网页 UI 装饰中，SVG 路径（如弧线、曲线）的动态旋转能显著提升视觉吸引力。针对用户提供的双曲线环绕圆环的 SVG 结构，核心挑战在于：让两条
✅ 正确实现方案：CSS 动画 + 自定义 transform-origin
首先，为需旋转的路径添加类名（如 rotating-lines），并在 CSS 中定义动画：
.rotating-lines {
animation: rotate 12s linear infinite;
transform-origin: 80px 70px; /* 关键：指定旋转中心坐标 */
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}- animation: rotate 12s linear infinite：12 秒完成一圈，匀速（linear），无限循环；
- transform-origin: 80px 70px：这是本例的关键。原始 SVG 的 viewBox="0 0 156 142"，其中心理论坐标为 (78, 71)；经微调（结合视觉居中与路径起止点），80px 70px 可使两条曲线自然绕整体图形中心旋转。该值需根据实际 SVG 尺寸和内容布局校准。
? SVG 适配要点（避免裁切）
原 SVG 高度为 142，但旋转时路径端点会超出原始边界（例如 y=140.344 已超限）。因此需扩大 viewBox 并调整坐标系：
- viewBox="0 -15 160 170"：Y 轴向上扩展 15，向下扩展 28（170−142=28），确保旋转时顶部弧线（如 y=140.344）不被裁剪；
- 宽高属性（width/height）保持不变，仅扩展逻辑坐标空间。
⚠️ 注意事项与优化建议
- 旋转中心校准：transform-origin 值并非固定。若更换 SVG 或调整图形位置，需重新计算中心点（推荐使用 viewBox 宽高的一半，再结合开发者工具调试）；
- 性能优先：使用 transform 触发 GPU 加速，比操作 d 属性或 JS 动画更高效；
- 兼容性：现代浏览器均支持，IE11 需添加 -webkit- 前缀（已不推荐兼容）；
- 进阶控制：如需不同速度或方向，可为每条路径设置独立动画（如 .line-1 { animation-duration: 8s; }，.line-2 { animation-duration: 15s; animation-direction: reverse; }）。
通过以上三步——添加动画类、精调 transform-origin、扩展 viewBox——即可实现专业级 SVG 路径旋转动效，轻量、可维护，且完全符合现代 Web 性能规范。
立即学习“前端免费学习笔记（深入）”；
