svg 动画逐字母填充 vivus.js答案

【问题标题】：svg animation letter by letter fill vivus.jssvg 动画逐字母填充 vivus.js
【发布时间】：2017-05-27 22:42:37
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： javascript jquery css svg vivus

【解决方案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

【讨论】：