我的 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);
dashoffset然后，我的 CSS 只是為to 設定影片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 是動態加載的。這是一個顯示問題的小提琴（在 Chrome 中作業，而不是在 Safari 中），謝謝@kaiido。
uj5u.com熱心網友回復：
我通過做兩件事解決了這個問題：
- 將
animation屬性也放入 JS setTimeout我發現如果影片延遲大于超時，Safari 不會處理影片。所以我將延遲降低到 200 毫秒。
更新的 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);
作業小提琴
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/459443.html
標籤：javascript css svg CSS动画 中风