使用SVG实现动态签名效果

之前看过的svg动画的相关内容，想起了之前在flash中常见的一种动画–动态写文字。语言乏力，大约就是这么个样子：Flash模仿制作毛笔写字效果动画实例教程，所以就想用svg实现这么一个效果。

实现成这个鬼样子：尹全超-签名

大约思路如下

0.签名

我使用的AI导出的，鼠标画的押效果不好，有条件的直接数位板。

1.SVG动态画线

同样也找到了一篇文章：纯CSS实现帅气的SVG路径描边动画效果

利用了SVG中path的 stroke-dasharray 和 stroke-dashoffset 属性。

这篇文章实现了一个签名的效果，不过不是我想要的。谁签名能一笔画下来。。并且无法保证笔画的有序。

2.CSS3动画结束监听

步骤1中使用CSS3完成了动态画线的效果，为了解决中的笔画有序，就需要监听CSS3中动画结束事件。可以看这篇文章：transitionend，这样我们可以画完一条线，再触发画下一条线。

3.优化时间

一条长的线条画1s，一条短的线条总不能也画1s吧，所以取第一条线做基准，后面的线条根据比例换算时间。

4.没有完成的

整个效果是依赖JS+SVG，而SVG本身是支持动画的，我的理想是实现一个.svg文件就可以实现上面的效果，希望各位大神指教一下。。