最近需要一个手写签名动画效果，最后用 SVG 实现咯。
 

stroke-dasharray

path 的 stroke-dasharray 的属性用来控制线段样式，奇数项定义实线，偶数项定义空白。

stroke-dashoffset

path 的 stroke-dashoffset 定义了线段开始的偏移量。

path.getTotalLength()

获取 path 的长度；

path.getPointAtLength(length)

获取给定长度 length 在 path 的坐标 (x, y)；

svg.getBBox()

获取 svg 的原始大小；

实现方法

将 stroke-dasharray 的第二项定义为 path 的长度（path.getTotalLength()），第一项由 0 变化到长度。
使用 getPointAtLength 获取当前坐标，通过 CSS 应用到笔的元素上，如果 svg 经过了缩放，则使用 getBBox() 计算出比例。

补一个计算当前角度

var currentPoint = path.getPointAtLength(length);
var lastPoint = path.getPointAtLength(length - 1);
angle = Math.atan2(currentPoint.y - lastPoint.y, currentPoint.x - lastPoint.x) * 180 / Math.PI;