javascript - svg 动画逐字母填充 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