基于WebKit内核的浏览器中SVG动画显示异常问题求助

针对你遇到的WebKit内核浏览器（如Safari）中SVG加载动画失效的问题，核心原因有两个：一是SVG元素的旋转原点默认值在WebKit中与Chrome不一致，二是原代码中使用的stroke-dasharray数值未匹配圆的实际周长，导致浏览器解析差异。

以下是修复后的完整代码：

CSS代码 #

.progressIndicator {
  stroke: red;
}

.progressIndicator svg {
  animation: crotate 1.5s linear infinite;
  -webkit-animation: crotate 1.5s linear infinite;
  height: 100%;
  width: 100%;
  /* 明确设置旋转原点为中心，解决WebKit下旋转偏移问题 */
  transform-origin: center center;
  -webkit-transform-origin: center center;
}

.progressIndicator circle {
  stroke-dasharray: 1, 125.66; /* 使用圆的实际周长2*π*20≈125.66 */
  stroke-dashoffset: 0;
  animation: cdash 1.5s ease-in-out infinite;
  -webkit-animation: cdash 1.5s ease-in-out infinite;
  stroke-linecap: round;
  fill: none;
  stroke-width: 7.5px;
  /* 开启硬件加速，优化WebKit下动画流畅度 */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

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

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

@keyframes cdash {
  0% {
    stroke-dasharray: 1, 125.66;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 44.83, 125.66; /* 按周长比例换算原89的对应值 */
    stroke-dashoffset: -21.99; /* 按周长比例换算原-35的对应值 */
  }
  100% {
    stroke-dasharray: 44.83, 125.66;
    stroke-dashoffset: -77.79; /* 按周长比例换算原-124的对应值 */
  }
}

@-webkit-keyframes cdash {
  0% {
    stroke-dasharray: 1, 125.66;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 44.83, 125.66;
    stroke-dashoffset: -21.99;
  }
  100% {
    stroke-dasharray: 44.83, 125.66;
    stroke-dashoffset: -77.79;
  }
}

HTML代码 #

<div class="progressIndicator">
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="20" />
  </svg>
</div>

关键改动说明 #

• 设置旋转原点：给SVG元素添加transform-origin: center center及WebKit前缀，确保旋转时绕圆心进行，解决Safari中旋转偏移的问题。
• 匹配圆周长：将stroke-dasharray和stroke-dashoffset的数值按照圆的实际周长（2*π*半径）进行换算，避免不同浏览器对非标准数值的解析差异。
• 硬件加速：给circle元素添加translateZ(0)触发硬件加速，提升WebKit浏览器下的动画流畅度。

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