svg的path的应用

用svg的path标签可以画出任何你想画的图像

这里有一篇详细的指南，有兴趣的可以看下: svg的path

这里再引用一位博主写的不错的文章： SVG之path

再来看张图：

扇形图是圆的一部分，要画出图中的扇形图分三步：

#1：从圆心（400，300）画一条直线到弧的起点位置

#2：从弧的起点位置画一条弧到终点位置

#3：闭合路径

//利用Jquery获取到path元素

var path = $("#myCanvas").find("path")[0]

//获取path画出线条的总长度

var length = path.getTotalLength()

// 清除之前的动作

path.style.transition = path.style.WebkitTransition = 'none'

// 设置起始点

path.style.strokeDasharray = length + ' ' + length

path.style.strokeDashoffset = length

// 获取path的边界矩形的位置 获取一个区域，获取相关的样式，让浏览器寻找一个起始点。

path.getBoundingClientRect()

// 定义动作

path.style.transition = path.style.WebkitTransition =

'stroke-dashoffset 2s ease-in-out'

// Go!

path.style.strokeDashoffset = '0'

---