在网页开发中，使用SVG描边动画越来越多了。几天前，我还在Twitter上讨论了关于如何更好的玩转SVG描边动画，不过我还是觉得通过一些实例来详细阐述下如何更好的玩转SVG描边动画。
改变描边动画路经的起点
有时候在做一些描边动画时候，需要改变路经（path）的起点，即描边的时候从哪个点开始绘制。在CSS或者是js方法中，无法改变路经的起点。而使用Illustrator软件就可以很轻易的改变路经（path）的起点。
比如，在下面这个心形的描边动画中，如果改变它的起点即从心形的顶部的中心位置开始绘制比现在的起点绘制会更好一点。
要改变路经（path）的起点也很容易，在Illustrator中使用剪刀工具剪掉你想要路经开始起点位置的锚点，然后选择你剪掉的锚点并且从新把他们连接起来，选择 [点击右键→连接]（或者点击对象→路径→连接）。然后重新导出SVG格式，路经（path）的起点就改变了。
改变之前的路经（path）代码如下：
< path d="M170.5,46.5c0,46.9-85,108.3-85,108.3S.5,93.5.5,46.5s51.8-64.6,85-21C119.3-16.4,170.5-.5,170.5,46.5Z"/ >
改变之后：
< path d="M85.5,25.5c33.8-41.9,85-26,85,21s-85,108.3-85,108.3S.5,93.5.5,46.5,52.3-18.1,85.5,25.5Z" />
然后使用相同的代码，重新运行下动画，发现描边动画的起点已经改变了。
改变描边动画的方向
现在的描边动画是顺时针方向来绘制的。如果想让它逆时针来绘制，该怎么做呢？
使用Illustrator可以很方便的改变路经的绘制方向。先选中你要改变绘制方向的路经，右键点击选择建立复合路经，然后在属性面板中点击改变路经方向的按钮。
改变路经的绘制方向就是这么简单。
在先前的代码基础上，替换下SVG代码，就会发现现在的描边动画是逆时针方向的。
而如果这个路经只是一条简单的直线比如是line元素，则可以通过代码就可以改变它的绘制方向。比如：
< line x1="5" y1="2.6" x2="5" y2="221.1"/ >
修改下Y点的值就可以改变它的绘制方向：
< line x1="5" y1=“221.1” x2="5" y2=“2.6”/ >
这里还推荐一个更简单的改变路经绘制方向的方法，Chris Gannon 推荐的一个脚本，只要运行下这个脚本，就可以改变路经的绘制方向。（文件>脚本>其它脚本 选择这个脚步，就可以改变你选择的任何路经的绘制方向。）
本文主要是从Three Illustrator tricks for better SVG stroke animations这篇文章截取了一部分，有疏漏或者理解不到位的地方，还请多多指教！
