svg animation by letter fill vivus.js

Question

我試圖讓這個筆跡看起來儘可能自然，就像用鋼筆書寫一樣。

我認爲最好的辦法是填充每個字母，他們已經被寫入後，但到目前爲止，所有我設法做整個動畫使用完畢後填寫：

 $('path').attr('style', 'fill:white'); 

我將如何實現這一目標在每封信完成動畫後，還是有人有更好的選擇？這裏的未填充狀態：

https://codepen.io/anon/pen/WjBeWG

Answer 1

這花了我一段時間才能得到，但我終於有了答案......
1）刪除所有fill:none硬編碼到SVG代碼
2）在CSS中，添加：

path { 
    transition: 1s fill; 
    fill: transparent;//transparent is animatable, "none" isn't 
} 

3）本加入了jQuery：

//Target each of the paths 
$("svg path").each(function(i){ 
    var path = $(this);//Store the element (setTimeout doesn't have access to $(this)... 
    setTimeout(function(){ 
    path.css("fill", "white"); 
    }, 400 + 400*i);//Add a delay based on the path's index 

}); 
//The following is only necessary to reset on the "click" event... 
$(document).click(function(){ 
    $("path").css({"fill":"black"}); 
    $("svg path").each(function(i){ 
    var path = $(this); 
    setTimeout(function(){ 
    path.css("fill", "white"); 
    }, 400 + 400*i); 

}); 

以下是我的CodePen上的示例：
https://codepen.io/jacob_124/pen/aWrbQg?editors=0010