使用SVG路径图制作线追踪特效

近期看了几篇三精-大精wing的“交互炸了”系列文章，收获颇多，这里学习记录一下。

本文知识点一览：

项目地址在最下面。

---

本篇主要记录如何动态绘制曲线，从而形成很精致的特性，先上图：

SVG简介

SVG 意为可缩放矢量图形（Scalable Vector Graphics），使用 XML 格式定义图像。其优势：

SVG 可被非常多的工具读取和修改（比如记事本）

SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。

SVG 是可伸缩的

SVG 图像可在任何的分辨率下被高质量地打印

SVG 可在图像质量不下降的情况下被放大

SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）

SVG 可以与 Java 技术一起运行

SVG 是开放的标准

更多可查看 w3school的SVG教程

SVG路径

格式：

M = moveto， 相当于android 里的 moveTo()

L = lineto， 相当于lineTo()进行画直线

H = horizontal lineto， 画水平直线

V = vertical lineto， 画竖直直线

C = curveto， 相当于android 里的 cubicTo()

S = smooth curveto

Q = quadratic Belzier curve

T = smooth quadratic Belzier curveto

A = elliptical Arc

Z = closepath

点我查看一个完整的svg路径，在空白处右键，选择查看源代码，可查看其源码：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/