遺漏的類型錯誤：無法讀取空

Question

我的SVG動畫作品罰款codepen

的特性「getTotalLength」但是，當我把它添加到my page它不工作了。我一直在控制檯收到此消息：

遺漏的類型錯誤：無法讀取性能在animatePath空

的 'getTotalLength'（sf.js：4）

在sf.js：21

4 var length = path.getTotalLength(); 21 animatePath('#bigs', 'stroke-dashoffset 0.6s ease-in-out');

Answer 1

您必須等到SVG已經加載並且DOM準備就緒後，才能獲得對路徑的引用。您的Javascript運行得太快，因此

var path = document.querySelector(pathname); 

返回null。

這不會影響codepen，因爲它在加載後運行Javascript。

爲了解決這個問題，包您animatePath()調用類似如下：

window.onload = function() { 
    animatePath('#bigs', 'stroke-dashoffset 0.6s ease-in-out'); 
    animatePath('#a1', 'stroke-dashoffset 0.5s 0.5s ease-in-out'); 
    ... 
}