SVG Spinner/Loader在移动端浏览器无法显示，求解决方案

问题分析 #

移动端Chrome和Firefox对SVG内联<animate>元素的支持存在兼容性差异，同时SVG的transform属性在移动端的渲染逻辑和桌面端有区别，这是导致动画无法显示的核心原因。

解决方案 #

下面是经过兼容性优化后的代码，针对移动端做了两处关键调整：

1. 用CSS动画替代SVG内联<animate>
   移动端浏览器对CSS动画的支持更稳定，将stroke-dashoffset的动画逻辑迁移到CSS中实现。

2. 优化SVG的transform属性
   添加transform-box: fill-box确保transform-origin的参考系正确，同时用百分比单位替代像素，提升跨设备兼容性。

const Spinner = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    style={{
      margin: "auto",
      background: "none",
      display: "block",
      shapeRendering: "auto",
    }}
    width="120px"
    height="120px"
    viewBox="0 0 100 100"
    preserveAspectRatio="xMidYMid"
  >
    <path
      fill="none"
      stroke="#441C55"
      strokeWidth="3"
      strokeDasharray="197.57 59.02"
      d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z"
      strokeLinecap="round"
      style={{
        transform: "scale(0.8)",
        transformOrigin: "50% 50%",
        transformBox: "fill-box",
        animation: "spinDash 1s linear infinite",
      }}
    />
    <style jsx>{`
      @keyframes spinDash {
        0% {
          stroke-dashoffset: 0;
        }
        100% {
          stroke-dashoffset: 256.59;
        }
      }
    `}</style>
  </svg>
);

export default Spinner;

额外优化建议 #

• 简化strokeDasharray和stroke-dashoffset的数值，去掉不必要的小数位，不影响动画效果但能减少浏览器解析负担。
• 如果是React项目，确保style jsx或全局CSS能正确作用到SVG元素；普通项目可把@keyframes放到全局样式表中。
• 测试前清除移动端浏览器缓存，避免旧代码干扰测试结果。

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