为何SVG打钩动画在Safari浏览器中无法正常显示？

问题根源及修复步骤 #

1. CSS嵌套语法兼容性不足

Safari 15.4以下版本不支持原生CSS嵌套语法，你代码中svg选择器内部嵌套的.cls-1规则不会生效，导致SVG的stroke样式未正确应用，直接造成元素不可见。

修复：
将嵌套的CSS规则展开为独立选择器：

/* 替换原来的嵌套规则 */
svg .cls-1 {
  stroke: #2d77e3;
}

2. 路径描边参数与Safari渲染逻辑不匹配

你设置的stroke-dasharray和stroke-dashoffset值（circle的700、checkmark的150）与路径实际周长偏差较大，Safari在处理这类超出路径长度的描边偏移时，可能会出现渲染异常。

修复：
使用路径实际周长值来设置参数：

• 圆形路径周长：2 * π * 94.15 ≈ 591，所以将circle的stroke-dasharray和初始stroke-dashoffset改为591
• 对勾路径长度约为132，所以将checkmark的stroke-dasharray和初始stroke-dashoffset改为132

3. 动画兼容性兜底（可选）

虽然现代Safari已支持标准@keyframes，但为了兼容更旧版本，可添加-webkit-前缀。

修改后的完整代码 #

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<svg id="checkmark-svg" class="run-animation svg-check" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 193.3 193.3">
    <circle class="cls-1 circle" cx="96.65" cy="96.65" r="94.15"/>
    <polyline class="cls-1 checkmark" points="46.9 101.4 76.9 131.4 146.4 61.9"/>
</svg>

CSS

.cls-1{
  fill:none;
  stroke:#231f20;
  stroke-miterlimit:10;
  stroke-width:5px;
}

.svg-check {
  position: inherit;
}

svg {
  margin: auto;
  width: 50px;
  height: 50px;
  display: block;
}

/* 展开嵌套规则 */
svg .cls-1 {
  stroke: #2d77e3;
}

.circle {
  stroke-dasharray: 591;
  stroke-dashoffset: 591;
}

.checkmark {
  stroke-dasharray: 132;
  stroke-dashoffset: 132;
}

.run-animation {  
  .circle {
    -webkit-animation: 2.5s circleDraw forwards;
    animation: 2.5s circleDraw forwards;
  }

  .checkmark {
    -webkit-animation: 0.75s checkmarkDraw forwards;
    animation: 0.75s checkmarkDraw forwards;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
  }
}

@-webkit-keyframes circleDraw {
  from {
    stroke-dashoffset: 591;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes circleDraw {
  from {
    stroke-dashoffset: 591;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes checkmarkDraw {
  from {
    stroke-dashoffset: 132;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes checkmarkDraw {
  from {
    stroke-dashoffset: 132;
  }
  to {
    stroke-dashoffset: 0;
  }
}

JavaScript

$('#checkmark-svg').on('click', function(){
  const svg = $(this);
  svg.removeClass('run-animation').width();
  svg.addClass('run-animation');
  return false;
})

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