SVG 描边动画在 Safari 中不起作用

SVG stroke animation not working in Safari

我的JS代码遍历每条路径,并根据路径长度添加一个stroke-dasharraystroke-dashoffset

setTimeout(() => {
    const $paths = document.getElementsByTagName('path');
    for (const path of $paths) {
        const totalLength = path.getTotalLength();
        path.style.strokeDashoffset = totalLength;
        path.style.strokeDasharray = totalLength;
    }
}, 300);

然后,我的 CSS 只是将 dashoffset 动画化为 0,同时降低描边不透明度并提高填充不透明度:

.character path {
    fill-opacity: 0;
    stroke-opacity: 1;
    stroke-width: 2px;
    stroke: white;
    -webkit-animation: path 4s linear 1s both;
            animation: path 4s linear 1s both;
}

@keyframes path {
    70% {
        fill-opacity: 0;
    }

    80% {
        stroke-dashoffset: 0;
        stroke-opacity: 1;
        
    }

    100% {
        stroke-opacity: 0;
        stroke-dashoffset: 0;
        fill-opacity: 1;
    }
}

这在 Chrome 中完美运行 - 动画显示正在绘制的路径,但在 Safari 中,路径只显示而没有任何动画。
我尝试添加前缀,但它不起作用。
编辑:这与我设置的超时有某种关系,我只是将它添加到问题的代码中。我必须添加该超时,因为 svg 是动态加载的。 这是一个显示问题的 Fiddle(在 Chrome 中有效,在 Safari 中无效),谢谢@kaiido。

我通过做两件事解决了这个问题:

  1. animation属性也放在JS里
  2. 我发现如果动画延迟大于超时,Safari 不会在 setTimeout 中处理动画。所以我把延迟降低到200ms。

更新的 JS:

setTimeout(() => {
    const $paths = document.getElementsByTagName('path');
    for (const path of $paths) {
        const totalLength = path.getTotalLength();
        path.style.strokeDashoffset = totalLength;
        path.style.strokeDasharray = totalLength;
        path.style.animation = 'path 4s linear 0.2s both';
  };
}, 300);

Working Fiddle