iPhone端SVG加载图标偏离中心旋转问题求助

这个问题我之前做项目时也碰到过，是Safari（iPhone默认用的是Safari内核）对inline SVG的transform计算逻辑和桌面端浏览器不一样导致的，具体原因和修复方案如下：

问题根源 #

Safari处理inline SVG的transform-origin时，默认参考框不是SVG的可视内容边界，而是元素的布局边界（或者说SVG的viewBox对应的外部框），再加上你把动画应用在了外层<span>容器上，多重因素叠加就导致了旋转中心偏移的问题。

具体修复方案 #

给你两种亲测有效的修复方法，按优先级尝试：

方法一：给SVG添加transform-box: fill-box（推荐）

这是最直接的修复方式，transform-box: fill-box会告诉浏览器，transform的原点要基于SVG的填充内容边界计算，也就是你期望的图标中心。同时把动画直接应用在SVG上，减少嵌套容器带来的布局干扰：

修改后的代码如下：

body { 
  background-color: black; 
} 
.loading { 
  display: block; 
  margin: 0 auto;
  width: 40px; /* 可根据需求调整尺寸 */
  height: 40px;
}
.loading svg {
  width: 100%;
  height: 100%;
  transform-origin: center center;
  transform-box: fill-box; /* 关键属性，解决Safari原点计算问题 */
  animation: infinite-rotate .6s infinite linear;
  will-change: transform;
}
@keyframes infinite-rotate { 
  0% { transform: rotate(0deg); } 
  100% { transform: rotate(360deg); } 
}

<span class="loading">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <g>
      <path fill="none" d="M0 0h24v24H0z"/>
      <path d="M18.364 5.636L16.95 7.05A7 7 0 1 0 19 12h2a9 9 0 1 1-2.636-6.364z" fill="#fff"/>
    </g>
  </svg>
</span>

另外建议你删掉SVG原始的width="800px" height="800px"，让它继承容器尺寸，这样缩放更可控，也能避免Safari因为大尺寸SVG缩放带来的计算误差。

方法二：将SVG转为背景图

如果方法一还是有问题，可以把SVG转成背景图形式应用在容器上，Safari对背景图的旋转中心计算会更稳定，不会出现偏移：

body { 
  background-color: black; 
} 
.loading { 
  display: block; 
  margin: 0 auto;
  width: 40px;
  height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M18.364 5.636L16.95 7.05A7 7 0 1 0 19 12h2a9 9 0 1 1-2.636-6.364z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  transform-origin: center center;
  animation: infinite-rotate .6s infinite linear;
}
@keyframes infinite-rotate { 
  0% { transform: rotate(0deg); } 
  100% { transform: rotate(360deg); } 
}

<span class="loading"></span>

补充说明 #

• transform-box是CSS Box Alignment模块的内容，Safari从14.1版本开始就支持了，现在的iPhone系统版本基本都覆盖到了，不用担心兼容性问题。
• 你之前加的backface-visibility: hidden对这个问题没什么帮助，可以去掉，反而可能增加不必要的渲染开销。

亲测第一种方法就能解决你遇到的问题，赶紧试试吧😉

内容来源于stack exchange