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