svgアニメーション手紙by fill fill vivus.js

Question

私はこの手書きの外観をペンで書いたようにできるだけ自然なものにしようとしています。

私は、彼らが書かれてきた後に最良のオプションは、各文字を埋めていると思いますが、これまで全体のアニメーションが使用を終了した後、私はやって管理しているすべてが充填されています

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

どのように私はこれを達成するであろう各手紙がアニメ化を終えた後、または誰かがより良い選択肢を持っていますか？ここで充填されていない状態です。

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

Answer 1

これは、取得するために私にしばらく時間がかかったが、私は最終的に答えを持っている...
1）削除し、すべてのハードSVGコード
2）にコード化fill:none 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); 

}); 

私のコードページの例を次に示します。
https://codepen.io/jacob_124/pen/aWrbQg?editors=0010