看d3.js的时候就见识过元素有多牛X,啥都能画出来,可不知其原理的话,看上去简直形同天书!没关系,有的是时间精力和耐性,仔细看看这天书的正确打开方式。
把看做是一支笔,可以按照我的意愿在哪儿落“笔”,画各种各样在其功能范围内的线条,还能自动帮我做很多事情来美化这些线条。所有这些控制这支“笔”的信息被包含在元素的"d"
落笔(M)
以moveTo首字母M开头,加上坐标,以逗号或空格分割,表示移动到指定坐标位置。
直线(L)
以lineTo首字母L开头,加上坐标,以逗号或空格分割,表示从当前位置画一条直线到指定坐标位置。
可连续画多条直线
这就近似画了个矩形,为什么说近似,我们加上线的宽度看一下
左上角的残缺说明,即使直线的开始和末尾的坐标重合,svg也不会对重合处做自动衔接处理,咋办?
封闭(Z)
用Z代表closePath,表示让svg自动将前一个M指定的起始位置与Z之前最后一个坐标位置用直线连接。
现在就真的是个矩形了。
可以利用多个M在同一个path中画出多余一个不相连的图形。