逐个字母填充的 svg 动画 vivus.js

Question

我的目标是尝试让这个笔迹看起来尽可能自然，就像用钢笔写的一样。

我认为最好的选择是在每个字母写完后填充它们，但到目前为止我所能做的就是在整个动画完成后填充：

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

在每个字母都完成动画后，我将如何实现这一点，或者有人有更好的选择吗？这是未填充的状态：

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

Answer 1

这花了我一段时间才得到，但我终于找到了答案......
1 ) 删除所有硬编码到 SVG 代码中的 fill:none
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

逐个字母填充的 svg 动画 vivus.js

svg animation letter by letter fill vivus.js

javascript

css

jquery

svg

vivus