CSS动画中圆形加载图标旋转偏离中心的问题求助

以下是针对你遇到的加载图标偏心旋转问题的几种解决方案：

1. 修正SVG文件的对齐问题 #

旋转偏心最常见的原因是SVG本身存在多余空白区域，或者viewBox属性设置不当。你可以：

• 打开load.svg文件，检查viewBox值，确保它和图标实际尺寸匹配（比如图标是120x120，viewBox="0 0 120 120"）
• 使用SVG编辑工具（比如Inkscape、Figma）去除图形周围的多余空白，确保图标在画布正中心

2. 调整img元素的布局与transform-origin设置 #

尝试修改CSS，明确设置元素的布局方式和旋转中心：

.loader-wrapper {
  /* 确保容器居中，避免图标偏移 */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}

.loader-wrapper img {
  animation: spin 0.8s linear infinite;
  /* 明确设置旋转中心为元素中心 */
  transform-origin: 50% 50%;
  /* 消除inline元素的基线对齐问题 */
  display: block;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

3. 改用SVG作为背景图（替代img标签） #

如果上述方法无效，可以将SVG作为容器的背景图，直接旋转容器本身，更容易控制中心：

.loader-wrapper {
  width: 120px;
  height: 120px;
  background: url('load.svg') center/contain no-repeat;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

对应的HTML简化为：

<div class="loader-wrapper"></div>

这些方法应该能解决旋转偏心的问题，优先检查SVG本身的对齐情况，这是最常见的诱因。

内容的提问来源于stack exchange，提问作者bobacup