如何以与 vivus.js 类似的样式为 SVG 填充和路径设置动画

Question

我正在尝试使用 vivus.js 为 SVG 设置动画，但它似乎没有做任何事情。

Vivus 似乎能够正确读取 SVG，我可以运行以下代码：

var test = new Vivus('welcome_message', {duration: 200});
console.table(test.map);

并在控制台中得到如下结果（vivus 建议你这样调试）：

(index) el    startAt             duration            progress
0       path  0                   133.33333333333331  0.0075000000000000015
1       path  5.555555555555556   133.33333333333331  0
2       path  11.111111111111112  133.33333333333331  0
3       path  16.666666666666668  133.33333333333331  0
4       path  22.222222222222225  133.33333333333331  0
5       path  27.777777777777782  133.33333333333331  0
6       path  33.333333333333336  133.33333333333331  0
7       path  38.88888888888889   133.33333333333331  0
8       path  44.44444444444445   133.33333333333331  0
9       path  50.00000000000001   133.33333333333331  0
10      path  55.555555555555564  133.33333333333331  0
11      path  61.11111111111112   133.33333333333331  0
12      path  66.66666666666667   133.33333333333331  0

这告诉我 vivus 正在工作，但是当代码运行时，什么也没有发生。

请看以下非常简单的 jsfiddle 示例：

https://jsfiddle.net/zzgnkwtn/2/

我能想到的只是我的 SVG 可能有问题，但看到它正确地拾取路径，这似乎不正确。

这是 vivus 文档的链接，如果有人想看看，我很难过。

https://github.com/maxwellito/vivus#vivusjs

提前感谢您的帮助。

编辑

（将标题从“使用 vivus.js 的 SVG 动画不起作用”更改为“如何以与 vivus.js 类似的样式为 SVG 填充和路径设置动画”）

我已经意识到我想要达到的最终目标实际上并不是上面的问题，这是因为我是 SVG 动画的新手并且开始走错了路。

我更希望实现类似于以下教程的内容： https://medium.com/@gordonnl/stylised-line-animations-ded23320ffe5#.v6va1kc1w

主要区别和主要问题是我想要那种确切类型的动画，但我想为 fill 和路径设置动画，而不仅仅是路径。

在@Alvin 的帮助下，我意识到某种clipPath 或mask 是必需的，我尝试按照上述教程执行此操作，但这是我得到的结果： http://codepen.io/anon/pen/dMeQLB

这似乎为某些路径设置了动画，但它绝对不是我想要的。

任何人的帮助都会很棒！

最终结果

我终于设法实现了我想要做的事情，大部分问题是 SVG 没有以最佳方式在 Illustrator 中制作动画，我需要将我的对象转换为 Compound Path 以便我可以使用它是clipPath，然后有一个简单的路径，我可以在它下面轻松地制作动画。

演示：http://codepen.io/anon/pen/zqjyzX

Answer 1

查看我的演示，点击蓝色圆圈重新开始动画。

var sign = new Vivus('mySign', {
    type: 'scenario-sync',
    duration: 20,
    start: 'autostart',
    dashGap: 20,
    forceRender: false
  },
  function() {
    if (window.console) {
      console.log('Animation finished. [log triggered from callback]');
    }
    $('#mySign').find('path').attr('class', 'fill_path');
  });

function runme() {
  $('#mySign').find('path').attr('class', '');
  sign.reset().play();
};

svg * {
	stroke: blue;
	stroke-width: 1;
	fill: none;
}
.fill_path {
	fill: blue;
}

<script src="//code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="//cdn.jsdelivr.net/vivus/latest/vivus.min.js"></script>

<svg id="mySign" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="200px" height="200px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"  >

      <path data-duration="30" d="M27.9,9.6c0,0,0.2,1.1,0.4,2.7c0.1,0.4,0.2,1.1,0,1.6c-0.2,0.6-0.7,0.8-1.1,0.9c-0.4,0.1-1,0.1-1.3-0.2c-0.7,0.7-0.6,0.6-1.1,0.7c0,0-0.3,0.1-0.4,0.1c-0.1,0-0.2-0.1-0.3-0.1c-0.6,0.1-0.9-1-1-1.4c-0.3-1.4-0.6-2.8-0.9-4.2C22.2,9.5,22,9,22,8.9c-0.1-0.2-0.1-0.5-0.2-0.7c0.1,0,0.4-0.1,0.5-0.1c0.4-0.1,0.5,0.1,0.6,0.5c0.4,1.5,0.7,3,1.1,4.5c0.1,0.2,0.4,1.4,0.9,1.3c0.3-0.1,0.1-1.1,0.1-1.3c-0.2-0.8-0.3-1.6-0.5-2.4c-0.1-0.8-0.2-1.5-0.4-2.3c-0.2-0.7-0.1-0.8,0.3-0.9c0.2,0,0.6,0,0.6,0.2c0,0,0,0.4,0,0.4c0,0.2,0.1,0.4,0.1,0.6c0.3,1.4,0.6,2.9,0.8,4.3c0.1,0.4,0.6,1,1.1,0.9c0.4-0.1,0.1-2,0.1-2.1c0-0.2-0.1-0.4-0.1-0.6c0,0-0.1-1.3-0.2-2c-0.1-0.7-0.2-1.3-0.4-1.9C26.8,7.1,27.4,7,27.4,7c0.3-0.1,0.2,0.2,0.3,0.2C27.8,8,27.9,8.8,27.9,9.6z"></path>
      <path data-duration="30" d="M32.3,9.4c-0.1,0-0.8,0.1-0.9,0.1c-0.3,0-0.6,0.1-0.8,0.1c0.2,1.1,0.4,2.2,0.6,3.2c0.4-0.1,0.9-0.2,1.3-0.2c0.1,0,0.3,0,0.4,0c0.1,0.1,0.2,0.7,0.3,0.9c0.1,0.4-0.1,0.3-0.4,0.4c-0.1,0-0.7,0.1-0.8,0.1c-0.5,0.1-1,0.2-1.5,0.3c-0.1-0.1-0.2-0.2-0.2-0.2c0-0.2,0-0.1,0-0.4c-0.2-1-0.4-2.1-0.6-3.1c-0.2-0.9-0.3-1.9-0.5-2.8C29.1,7.4,29,7.1,29,6.8c0.3-0.1,0.7-0.2,1.1-0.3c0.5-0.1,1-0.2,1.5-0.3c0.3-0.1,0.5,0.8,0.5,1c0,0-0.3,0.2-0.3,0.2c-0.4,0-0.8,0.1-1.2,0.1c-0.3,0.1-0.3,0-0.3,0.3c0,0,0.1,0.5,0.2,0.7c0.2,0.1,0.3,0,0.6,0c1.3-0.2,1.4-0.3,1.5,0.5C32.6,9.1,32.5,9.3,32.3,9.4z"></path>
      <path data-duration="30" d="M36.6,13.2c-0.5,0.1-1.6,0.4-1.7,0.4c-0.2,0-0.2-0.1-0.3-0.2c-0.3-2.4-0.7-4.8-1-7.1c0,0-0.2-0.4,0.1-0.5c1.1-0.2,1.2-0.4,1.3,0.7c0,0.3,0.1,0.7,0.1,1c0,0.1,0,0.4,0,0.5c0.2,1.1,0.4,2.2,0.5,3.3c0.1,0.1,0,0.7,0.2,0.6c0.1,0,0.5-0.1,0.5-0.1c0.2,0,0.4,1.2,0.4,1.2C36.8,13,36.7,13.1,36.6,13.2z"></path>
      <path data-duration="30" d="M39.4,6.9c-0.3,0.6-0.5,1.2-0.6,1.7c0,0.2-0.1,0.5-0.1,0.7c0,0.1,0,1,0,1.2c0.1,0.8,0.6,1.3,1.5,1.2c0.1,0,0.1,0,0.1,0c0.3,0,0.5,0.8,0.5,0.9c0,0.1-0.1,0.2-0.2,0.2c-0.1,0-0.1,0-0.2,0c-0.1,0-0.5,0-0.7-0.1c-0.1,0-0.3,0-0.3,0c-1.4-0.4-1.6-1.3-1.7-2c0,0-0.1-1-0.1-1.4c0-0.4,0.1-1.3,0.2-1.9c0-0.1,1-2.3,1.7-2.4c0.1,0,0.1,0,0.2,0.1c0.1,0.3,0.2,0.6,0.2,0.6C40.1,5.7,39.6,6.5,39.4,6.9z"></path>
      <path data-duration="30" d="M43.9,12.4c-1.5,0.1-2.2-2.5-2.2-3.1c0-0.4-0.1-0.7-0.1-1.1c0-0.1,0.1-0.7,0.1-1c0.1-1.4,0.9-3,2.4-3.1c0.6-0.1,1.3,0.6,1.6,1.1c0.6,1,0.8,2.1,0.9,3.2C46.5,10.1,46.2,12.2,43.9,12.4z M44.5,5.7c-0.2-0.2-0.5-0.5-0.7-0.5c-1,0.1-1.2,3.1-1.1,3.6c0,0.2,0.3,2.7,1.4,2.6c0.3,0,0.7-0.4,0.9-0.7c0.5-0.8,0.5-1.6,0.4-2.3C45.3,7.7,45,6.2,44.5,5.7z"></path>
      <path data-duration="30" d="M55.1,11.9c-0.2,0-0.4,0-0.6-0.1c-0.3-1.1-0.4-1.5-0.5-2.3c-0.2-0.9-0.4-1.9-0.6-2.8c0,0,0,0,0,0c-0.4,1.2-1,3.3-1.3,5c-0.1,0.1-0.9,0.3-1.1,0.3c-0.1,0-0.1,0-0.2,0c-0.4-1.3-0.9-2.9-1.3-4.3c-0.3,1.1-0.3,2.5-0.6,4.2c0,0-0.2,0.1-0.2,0.1c-0.4,0-0.2,0-1,0.1c0-0.1,0-0.1,0-0.2c0,0,0.1-0.9,0.1-1.4c0.1-0.8,0.4-3.4,0.5-4.8c0-0.1,0.1-0.3,0.1-0.5c0-0.1,0-1,0.3-1c0.3,0,1.1,0.1,1.1,0.1c0.5,1.5,0.9,3.1,1.6,5c0,0,0,0,0,0c0.5-1.7,1.1-3.5,1.4-4.4C52.8,4.6,53,4.3,53,4.1C53.1,4,53.8,4,53.9,4c0.4,0,0.5,1,0.5,1.4c0.1,0.3,0.2,0.7,0.2,1.1c0.1,0.3,0.2,0.9,0.2,1.3c0.1,0.6,0.3,1.4,0.4,2.2c0.1,0.4,0.4,1.4,0.4,1.5C55.8,11.9,55.2,11.8,55.1,11.9z"></path>
      <path data-duration="30" d="M59.7,7.2c-0.1,0-0.8-0.1-0.9-0.1c-0.3,0-0.6,0-0.8,0c0,1.1,0,2.2,0,3.3c0.5,0,0.9,0,1.4,0c0.1,0,0.3,0,0.4,0.1c0,0.1,0.1,0.7,0.1,0.9c0,0.4-0.2,0.3-0.5,0.3c-0.1,0-0.7-0.1-0.8-0.1c-0.5,0-1,0-1.6,0c-0.1-0.1-0.1-0.2-0.1-0.3c0-0.2,0-0.1,0-0.4c0-1.1,0-2.1,0-3.2c0-0.9,0-1.9,0-2.8c0-0.3,0-0.6,0-0.9C57.3,4,57.7,4,58.1,4c0.5,0,1,0,1.5,0c0.3,0,0.3,0.9,0.3,1c0,0-0.3,0.1-0.4,0.1c-0.4,0-0.8-0.1-1.2-0.1C58.1,5,58,4.9,58,5.3c0,0,0,0.5,0,0.7c0.2,0.1,0.3,0.1,0.6,0.1C60,6.1,60,6,60,6.9C60,7,59.9,7.2,59.7,7.2z"></path>
      <path data-duration="30" d="M68.6,5.4c-0.4,0-0.9-0.1-1.3-0.1c-0.1,1.9-0.2,3.8-0.4,5.7c0,0.1,0.1,0.6,0.1,0.7c0,0.1-0.1,0.2-0.1,0.2c-0.2,0-0.7,0-0.8,0c-0.1,0-0.2-0.1-0.3-0.1c-0.1-0.1-0.1-0.6-0.1-0.8c0.1-1.5,0.2-3.1,0.3-4.6c0.1-1.4,0.2-0.9-1.7-1.2c0-0.1-0.1-0.7-0.1-0.8c0,0,0-0.2,0.1-0.3c1.1,0.1,2.1,0.1,3.2,0.2c0.4,0,1.3,0.1,1.7,0.1c0,0.1,0.1,0.2,0,0.4C69.1,5.1,69.1,5.4,68.6,5.4z"></path>
      <path data-duration="30" d="M71.6,12.5C70.1,12.3,69.9,9.6,70,9c0-0.4,0.1-0.7,0.1-1.1c0-0.1,0.2-0.7,0.2-1c0.3-1.4,1.4-2.8,2.9-2.6c0.6,0.1,1.2,0.9,1.4,1.4C74.9,6.8,75,7.9,74.8,9C74.7,10.6,73.9,12.7,71.6,12.5z M73.5,6c-0.1-0.2-0.3-0.6-0.6-0.7c-1-0.1-1.7,2.8-1.8,3.4c0,0.2-0.2,2.7,0.9,2.8c0.3,0,0.8-0.3,1-0.6c0.6-0.7,0.7-1.5,0.8-2.2C73.9,8.1,73.9,6.5,73.5,6z"></path>
      <path data-duration="30" d="M83.6,7.2c-0.4-0.1-0.9-0.1-1.3-0.2c-0.3,1.9-0.6,3.8-0.9,5.6c0,0.1,0,0.6,0,0.7c0,0.1-0.1,0.1-0.1,0.2c-0.2,0-0.7,0-0.8,0c-0.1,0-0.2-0.1-0.3-0.2c0-0.1,0-0.6,0-0.8c0.2-1.5,0.5-3.1,0.7-4.6c0.2-1.4,0.3-0.8-1.6-1.3c0-0.1,0-0.7,0-0.8c0,0,0.1-0.2,0.1-0.3c1,0.2,2.1,0.3,3.1,0.5c0.4,0.1,1.3,0.2,1.6,0.3c0,0.1,0,0.3,0,0.4C84.1,7,84,7.3,83.6,7.2z"></path>
      <path data-duration="30" d="M87.8,14.4c0,0.1-0.1,0.2-0.1,0.2c-0.1,0.1-0.8,0.1-1,0c-0.2,0-0.2-0.3-0.1-0.4c0.2-0.8,0.4-1.6,0.6-2.4c0.1-0.5,0.2-0.9,0.3-1.4c-0.4-0.1-0.9-0.2-1.3-0.2c-0.1,0.6-0.2,1.3-0.4,1.9c0,0,0,0.4,0,0.4c0,0.2-0.1,0.4-0.1,0.7c0,0.1,0,0.6-0.1,0.6c0,0.1-0.1,0.3-0.2,0.2c-0.1,0-0.6-0.1-0.6-0.1C84.2,14,84,14,84.3,13.4c0.4-2.1,0.7-4.2,1.1-6.2c0-0.2,0.1-0.5,0.1-0.7c0.1,0,0.3-0.1,0.3,0c0.1,0,0.2,0.1,0.3,0.1c0.1,0,0.1,0,0.1,0c0.1,0,0.4,0.1,0.4,0.2c0.1,0.5-0.1,1.2-0.2,1.8c0,0.2-0.1,0.5-0.1,0.8c0.2,0.1,0.4,0.1,0.5,0.2c0.9,0.2,0.9,0.2,1-0.3c0.1-0.3,0.1-0.5,0.2-0.8c0-0.1,0.1-0.9,0.2-1.3c0.1,0,0.3,0,0.4,0c0.2,0,0.8,0.2,0.6,0.6C88.7,9.9,88.3,12.1,87.8,14.4z"></path>
      <path data-duration="30" d="M92.7,11.3c-0.1,0-0.8-0.2-0.8-0.3c-0.3-0.1-0.6-0.1-0.8-0.2c-0.2,1.1-0.5,2.1-0.7,3.2c0.4,0.1,0.9,0.2,1.3,0.3c0.1,0,0.3,0.1,0.4,0.2c0,0.1-0.1,0.7-0.1,0.9c-0.1,0.4-0.2,0.3-0.5,0.2c-0.1,0-0.7-0.2-0.7-0.2c-0.5-0.1-1-0.2-1.5-0.3c0-0.1-0.1-0.3-0.1-0.3c0-0.2,0.1-0.1,0.1-0.4c0.2-1,0.5-2.1,0.7-3.1c0.2-0.9,0.4-1.8,0.6-2.8c0-0.3,0.1-0.6,0.2-0.9c0.4,0,0.7,0.1,1.1,0.1c0.5,0.1,1,0.2,1.5,0.3c0.3,0.1,0.1,1,0.1,1.1c0,0-0.3,0-0.4,0c-0.4-0.1-0.8-0.2-1.1-0.3c-0.3-0.1-0.3-0.2-0.4,0.2c0,0-0.1,0.5-0.1,0.7c0.1,0.1,0.3,0.1,0.6,0.2c1.3,0.3,1.4,0.3,1.2,1.1C93.1,11.2,92.9,11.4,92.7,11.3z"></path>

	<path transform="translate(-270,30)" data-duration="30" d="M324.6,61.2c16.6,0,29.5-12.9,29.5-29.5c0-16.6-12.9-29.5-29.5-29.5c-16.6,0-29.5,12.9-29.5,29.5C295.1,48.4,308,61.2,324.6,61.2z" onclick="runme();" />
</svg>