CSS background-image引用的SVG动画在iOS设备无法播放如何解决

该问题是iOS Safari的已知兼容性问题：外部SVG文件作为背景图引入时，内置的SMIL动画会被浏览器默认静默停止，可通过以下方法修复：

• 检查服务器SVG资源的MIME类型配置
  确保你的服务器返回.svg文件的Content-Type响应头为image/svg+xml，iOS Safari对非标准MIME类型的SVG资源处理存在很多异常，这是最常见的诱因。

• 给加载类添加强制重绘属性
  给你的loading类额外添加属性触发iOS Safari的GPU渲染，避免背景图动画被静默跳过：

&.loading {
  background: url(/svg/loading_animated/fff.svg) $actionColor no-repeat center;
  /* 新增以下两行 */
  transform: translateZ(0);
  will-change: background;
}

• 调整SVG内部的动画实现方式
  把SVG内部的SMIL动画替换为内嵌在SVG里的CSS动画，iOS对SVG内部的CSS动画兼容性远高于SMIL动画，修改后的SVG代码如下：

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="margin: auto; background: none; display: block;" width="200" height="200" viewBox="0 0 100 100">
  <style>
    @keyframes rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    circle {
      transform-origin: center;
      animation: rotate 1.1s linear infinite;
    }
  </style>
  <circle cx="50" cy="50" fill="none" stroke="#fff" stroke-width="15" r="41" stroke-dasharray="193 66"/>
</svg>

• 禁用SVG资源的强缓存
  给服务器上的.svg资源配置Cache-Control: no-cache响应头，避免iOS Safari缓存静态资源时丢弃动画相关的解析信息，导致首次加载后后续调用都没有动画。

如果以上方案都无法生效，可以使用JS辅助触发重绘：当给元素添加loading类时，先把背景图设为空，下一帧再赋值为SVG地址，强制浏览器重新拉取解析资源：

const loadEl = document.querySelector('.目标元素')
loadEl.classList.add('loading')
loadEl.style.backgroundImage = 'none'
requestAnimationFrame(() => {
  loadEl.style.backgroundImage = 'url(/svg/loading_animated/fff.svg)'
})

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