SVG 沖程 animation 不工作 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 中完美運行 - animation 顯示正在繪制的路徑，但在 Safari 中，路徑只顯示而沒有任何 animation。
我試過前綴但它不起作用。
編輯：這與我設置的超時有某種關系，我只是將它添加到問題的代碼中。 我必須添加該超時，因為 svg 是動態加載的。 這是一個顯示問題的小提琴（適用於 Chrome，不適用於 Safari），感謝@kaiido。

Answer 1

我通過做兩件事解決了這個問題：

1. 將animation屬性也放在 JS 中
2. 我發現如果 animation 延遲大於超時，則 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);

工作小提琴