svg折线算法_SVG之Paths

看d3.js的时候就见识过元素有多牛X，啥都能画出来，可不知其原理的话，看上去简直形同天书！没关系，有的是时间精力和耐性，仔细看看这天书的正确打开方式。

把看做是一支笔，可以按照我的意愿在哪儿落“笔”，画各种各样在其功能范围内的线条，还能自动帮我做很多事情来美化这些线条。所有这些控制这支“笔”的信息被包含在元素的"d"

落笔(M)

以moveTo首字母M开头，加上坐标，以逗号或空格分割，表示移动到指定坐标位置。

直线(L)

以lineTo首字母L开头，加上坐标，以逗号或空格分割，表示从当前位置画一条直线到指定坐标位置。

可连续画多条直线

这就近似画了个矩形，为什么说近似，我们加上线的宽度看一下

左上角的残缺说明，即使直线的开始和末尾的坐标重合，svg也不会对重合处做自动衔接处理，咋办？

封闭(Z)

用Z代表closePath，表示让svg自动将前一个M指定的起始位置与Z之前最后一个坐标位置用直线连接。

现在就真的是个矩形了。

可以利用多个M在同一个path中画出多余一个不相连的图形。