svg動畫-錯誤無法讀取null的屬性'getTotalLength'

Question

我做了這個svg文本動畫http://jsfiddle.net/thLvLkq0/2/

function init(i) {
    path[i] = document.getElementById('path'+i);
    length = path[i].getTotalLength();
    path[i].style.transition = path[i].style.WebkitTransition = 'none';

    length[i] = length;
    path[i].style.strokeDasharray = length + ' ' + length;
    path[i].style.strokeDashoffset = length;

    path[i].getBoundingClientRect();
}

chrome瀏覽器返回此錯誤消息Cannot read property 'getTotalLength' of null

有什么辦法解決嗎？ 我不能使它工作。

Answer 1

之所以會這樣，是因為它正在尋找id為path3的元素，但是只有path1和path2 。 可以通過改變停止for循環for(var i=1; i<=3; i++)以for(var i=1; i<3; i++)