初窥 SVG Path 动画
本文讨论的主题是 SVG Path 动画(路径动画)。之所以要讨论这个话题，是因为在项目中有要求用到它。所谓 SVG Path 动画，就是让图形有像人实时绘制一样的动画效果，就比如下面这种：
1. 基础知识
开始 SVG Path 动画之前，你需要先准备一些基础知识，主要是SVG是什么，以及 Path（路径） 和 Stroke （描边）这两个东东。
1.1 SVG
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)，因此，SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。SVG 除了制作图像之外，还有各种用途，比如动画、 ICONFONT等。
看看兼容性：
1.2 path（路径）
path 元素是 SVG 基本形状中最强大的一个，它不仅能创建其他基本形状，还能创建更多其他形状。另外，path 只需要设定很少的点，就可以创建平滑流畅的线条（比如曲线）。
<svg>
<path d="M100 100, A120 120, -45 0 1, 300 300 A120 120, -45 0 1, 100 100"
stroke="#05D380" stroke-width="2"
fill="none"/>
</svg>1.3 stroke（描边）
要实现绘制动画效果，除了 path 外，还要依靠 stroke 的两个重要属性来完成，即 stroke-dasharray 和 stroke-dashoffset。
- 属性
stroke-dasharray：该值可能由两个值合写，使用英文逗号(,)分隔，第一个值是画出的每段实线线段的长度，第二个值是各段之间空隙的长度。如果无分隔，则说明两个值都是一样大小的。 - 属性
stroke-dashoffset：指定每个实线线段的起始偏移量。正数从路径起始点向前偏移，负数则向后。
举例而言，如果要实现类似 CSS 中 border-style: dotted; 这样的虚线效果，则可以设置 stroke-dasharray:5,10，第一个数字表示每一段实线长度为 5，第二个表示实线直接间隔长度为 10。
<svg>
<path d="M100 100, A120 120, -45 0 1, 300 300 A120 120, -45 0 1, 100 100"
stroke="#05D380" stroke-width="2"
fill="none"
stroke-dasharray="5,10"/>
</svg>1.4 CSS 控制
我们将 SVG 代码插入到 HTML 文件中，SVG本身也是一种DOM节点，能使用CSS属性控制。例如上例也可以改成这样。我们为 path 定义了一个样式类 mypath，并在 <style> 中进行定义：
<style>
.mypath {
stroke: #05D380;
stroke-width: 2;
stroke-dasharray: 5, 10;
fill: none;
}
</style>
<svg>
<path d="M100 100, A120 120, -45 0 1, 300 300 A120 120, -45 0 1, 100 100" class="mypath" />
</svg>1.5 CSS3 的 keyframes 和 animation
要动画，就需要借助 CSS3 的 keyframes 和 animation。此处知识略。
2. SVG Path 绘制动画原理分析
假设一条路径的总长度为 888，我们设置这条路径的 storke-dasharray:888 ，于是这条路径就变成了由长度 888 的实线与长度 888 的间隔组成；但是，由于路径的总长度只有 888，因此看上去和正常场景是一样的，只不过在实线的后面，还跟着一段长度 888 的间隔；
当我们设置 stroke-dashoffset:100 , 我们将该虚线向前偏移了 100；那我们设置 stroke-dashoffset:888，该路径就变成了空白。
在 CSS 中，你如果设置一个块级元素 margin-left: -100%，很可能你在屏幕中就看不到它了。其实 stroke-dashoffset 的表现也和这个差不多，用于定义“偏移”。
通过控制 stroke-dashoffset 属性值，我们就控制了这个路径的展示和隐藏，再配合 CSS3 的 animation 动画，就能够完美的实现绘制动画。
3. SVG Path 绘制动画实践
3.1 获得路径长度
路径的长度可以使用 js 来获得，上例的路径长度就是 888。
var path = document.querySelector('.mypath');
var length = path.getTotalLength(); // 888.73.2 设置stroke-dasharray和stroke-dashoffset
我们设置 stroke-dasharray 和 stroke-dashoffset 的值都为 888，这个值恰好是路径的长度。
不同的
path其长度是不一样的，请先用 js 获取其长度。
<style>
.mypath {
stroke: #05D380;
stroke-width: 2;
stroke-dasharray: 888;
stroke-dashoffset: 888;
fill: none;
}
</style>
<svg>
<path d="M100 100, A120 120, -45 0 1, 300 300 A120 120, -45 0 1, 100 100" class="mypath" />
</svg>你会发现什么都看不到，但当你手动修改 stroke-dashoffset 的值，使之从 888 逐步减少到 0时，你会发现图像会慢慢出现。
3.3 配合 CSS3 animation 动画
接下来，使用 CSS3 动画中的 keyframe 来控制 stroke-offset属性，把它的值从 888 变为 0，Path 绘制效果就出来了。
<style>
.mypath {
stroke: #05D380;
stroke-width: 2;
stroke-dasharray: 888;
stroke-dashoffset: 888;
fill: none;
-webkit-animation: go 4s ease-in-out forwards;
}
@-webkit-keyframes go {
0% {
stroke-dashoffset: 888;
}
100% {
stroke-dashoffset: 0;
}
}
</style>
<svg>
<path d="M100 100, A120 120, -45 0 1, 300 300 A120 120, -45 0 1, 100 100" class="mypath" />
</svg>到这里，SVG Path 绘制动画基本就讲完了，仅限于入门使用。你可以找其他的 path 来试试看。
路径动画的方向，其实是路径本身就规定了的，所以如果你需要一个特别的路径动画，那么就得保证路径是按你动画要求的步骤来绘制的。
4. 如果获得 path？
这是补充的内容。一开始我看到 path 元素里的 d 值，我是崩溃的，这玩意是啥啊。我怎么才能得到这个值呢？
首先，你得有一个 SVG 文件，怎么制作 SVG 文件，这个自己 Google 吧。
获得 SVG 文件之后，使用文本编辑器打开它，你会看到里面有你所需要的 svg 标签，也有你需要的 path 元素了，你所需要做的，可能就是拷贝，然后适当修改一下，最后再加上动画即可。
