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

Question

我的JS代码遍历每条路径，并根据路径长度添加一个stroke-dasharray和stroke-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。

Answer 1

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

把animation属性也放在JS里
我发现如果动画延迟大于超时，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

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

SVG stroke animation not working in Safari

javascript

css

svg

css-animations

stroke