带有旋转动画的圆形SVG为何显示不呈圆形？

嘿，这个问题我之前也碰到过好几次，大概率是这几个细节没处理好，咱们一步步来排查修复：

常见原因及对应修复方案 #

1. 旋转原点的计算逻辑不对 #

你给.svg-icon设置了transform-origin: 50% 50%，但SVG元素的坐标系统和普通HTML元素不一样——默认情况下，SVG的变换原点是基于整个viewBox的，而不是元素自身的边界盒。这就导致旋转中心没落在圆形的圆心，转起来就会看起来歪歪扭扭不像正圆。

修复办法：
给SVG元素加上transform-box: fill-box，强制让变换原点基于元素自身的边界盒计算，这样50% 50%就正好是圆心了：

.refresh-wrap .svg-icon {
  animation: rotatefresh 1s infinite linear;
  transform-origin: 50% 50%;
  transform-box: fill-box; /* 关键：修正变换原点的计算逻辑 */
}

2. SVG被容器拉伸变形了 #

你的.refresh-wrap是200x200的正方形，但SVG的symbol用的是viewBox="0 0 24 24"。如果引用SVG时没保持宽高比（比如只给SVG设了width: 100%但没管height），图形就会被拉伸成椭圆，哪怕旋转也变不回正圆。

修复办法：

• 要么给SVG设置相等的宽高：

.refresh-wrap .svg-icon {
  width: 100px;
  height: 100px; /* 宽高一致，避免拉伸 */
  /* 其他动画样式 */
}

• 要么用aspect-ratio: 1/1强制保持正方形比例，这样不管容器怎么变，SVG都不会变形：

.refresh-wrap .svg-icon {
  width: 80%;
  aspect-ratio: 1/1;
  /* 其他动画样式 */
}

3. translateZ(0)触发的渲染异常 #

你在动画里加了translateZ(0)，本意可能是开启硬件加速，但有些浏览器里这会导致SVG旋转时出现渲染bug，比如边缘锯齿或者轻微变形。

修复办法：

• 直接去掉translateZ(0)，动画依然能正常运行：

@keyframes rotatefresh {
  100% {
    transform: rotate(360deg);
  }
}

• 如果确实需要硬件加速优化，改用will-change: transform，这个属性更稳定：

.refresh-wrap .svg-icon {
  will-change: transform; /* 提前告知浏览器准备变换，优化渲染 */
  /* 其他动画样式 */
}

4. SVG图形本身就不是正圆 #

最后别忘了检查你的icon-refresh symbol里的图形——如果是用path画的，可能坐标写错了导致是椭圆；如果是circle元素，要确保cx和cy是viewBox的中心（也就是12,12，因为你的viewBox是0 0 24 24），半径r设置合理。

修复办法：
换成标准的正圆元素示例，确保图形本身没问题：

<symbol viewBox="0 0 24 24" id="icon-refresh">
  <circle cx="12" cy="12" r="10" fill="#333" />
</symbol>

完整修复后的示例代码 #

<div class="refresh-wrap">
  <svg class="svg-icon" viewBox="0 0 24 24">
    <use xlink:href="#icon-refresh"></use>
  </svg>
</div>

<style>
.refresh-wrap {
  width: 200px;
  height: 200px;
  border: 3px dotted red;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.refresh-wrap .svg-icon {
  width: 100px;
  height: 100px;
  will-change: transform;
  animation: rotatefresh 1s infinite linear;
  transform-origin: 50% 50%;
  transform-box: fill-box;
}

@keyframes rotatefresh {
  100% {
    transform: rotate(360deg);
  }
}
</style>

<svg xmlns="http://www.w3.org/2000/svg" style="position: absolute; width: 0; height: 0" id="__SVG_SPRITE_NODE__">
  <symbol viewBox="0 0 24 24" id="icon-refresh">
    <circle cx="12" cy="12" r="10" fill="#333" />
  </symbol>
</svg>

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