iOS设备中SVG图片CSS旋转动画失效问题求助

iOS的Safari和Chrome（基于WebKit内核）对通过<img>标签引用的SVG应用CSS旋转动画存在兼容性问题——img作为替换元素，WebKit引擎无法正确触发其transform动画。以下是几种可行的修复方案：

方案1：内联SVG到HTML中 #

将SVG代码直接嵌入HTML，而非通过<img>引用，这样CSS动画可以直接作用于SVG元素，iOS浏览器能正常识别：

<svg class="img-sth" viewBox="0 0 你的SVG宽 你的SVG高">
  <!-- 此处放入你的SVG原始代码 -->
</svg>

CSS保持原代码不变即可。

方案2：触发硬件加速强制动画生效 #

给<img>元素添加硬件加速相关属性，强制WebKit引擎处理动画：

.img-sth {
  position: absolute;
  height: 80px;
  top: -3px;
  left: 16px;
  -webkit-animation:spin-faster 4s linear 0.01s infinite;
  -moz-animation:spin-faster 4s linear 0.01s infinite;
  animation:spin-faster 4s linear 0.01s infinite;
  /* 添加以下属性触发硬件加速 */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}

@-moz-keyframes spin-faster { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin-faster { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin-faster { 100% { transform: rotate(360deg); } }

方案3：用容器包裹img，给容器加动画 #

把<img>放在一个div容器里，对容器应用旋转动画，通过容器带动img旋转：

<div class="spin-container">
  <img class="img-sth" src="/img/image.svg">
</div>

.spin-container {
  position: absolute;
  top: -3px;
  left: 16px;
  -webkit-animation:spin-faster 4s linear 0.01s infinite;
  -moz-animation:spin-faster 4s linear 0.01s infinite;
  animation:spin-faster 4s linear 0.01s infinite;
}

.img-sth {
  height: 80px;
}

@-moz-keyframes spin-faster { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin-faster { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin-faster { 100% { transform: rotate(360deg); } }

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