D3学习指北–第二章，基础复习
1、关于html的svg标签
html5里有很多个标签，但是关于D3的应用多用在一个标签上< svg >svg标签可以理解为一个绘画板，里面提供了各类的工具可以在画板上面作画，提供的工具我们下面会一个一个介绍。关于svg标签在html里面表示为<svg></svg>。熟练运用svg可以让你很顺利的学习D3。
2、svg内标签的style
svg内标签的css常用属性有以下几种：
- fill ：颜色 为图形内部颜色
- strok ：颜色 为图形的线条颜色
- strok-width ：宽度 为图形的线条宽度
3、svg内标签之矩形。
<rect></rect>为矩形元素，矩形参数一共有6个参数：
- x ：矩形左上角的横坐标
- y ：矩形左上角的纵坐标
- width ：矩形的宽
- height ：矩形的高
- rx ：圆角矩形恒方向的半径
- ry ：圆角矩形总方向的半径
直角矩形演示：
<svg style="width: 400px;height: 400px">
<rect x="50" y="50" width="200" height="150px" style="fill: white;stroke: black;stroke-width: 2"></rect>
</svg>
圆角矩形演示：
<svg style="width: 400px;height: 400px">
<rect x="50" y="50" width="200" height="100px" rx="5" ry="5" style="fill: white;stroke: black;stroke-width: 2"></rect>
</svg>
3、svg内标签之圆形与椭圆。
圆形跟椭圆本质是一样的，只是椭圆有两个不一样的半径。
<circle></cricle>圆形有三个参数：
- cx ：圆心的横坐标
- cy ：圆心的纵坐标
- r ：圆的半径
圆形演示：
<svg style="width: 400px;height: 400px">
<circle cx="50" cy="50" r="30" style="stroke-width: 2;fill: white;stroke: black"></circle>
</svg>
<ellipse></ellipse>椭圆形有四个参数：
- cx ：圆心的横坐标
- cy ：圆心的纵坐标
- rx ：圆的横向半径
- ry ：圆的纵向半径
椭圆演示：
<svg style="width: 400px;height: 400px">
<ellipse cx="50" cy="50" rx="40" ry="30" style="stroke-width: 2;fill: white;stroke: black"></ellipse>
</svg>
3、svg内标签之线段。
<line></line>线段一共有4个参数：
- x1 ：起点的横坐标
- y1 ：起点的纵坐标
- x2 ：终点的横坐标
- y2 ：终点的纵坐标
线段：
<svg style="width: 400px;height: 400px">
<line x1="30" y1="30" x2="150" y2="150" style="stroke-width: 2;fill: white;stroke: black"></>
</svg>
3、svg内标签之多边形与折线。
<polygon></polygon>多边形与<polyline></polyline>折线共同有一个参数：
- points : (x,y) (x,y) 分别对应点的坐标，可以任意个点
不同的是多边形会把最后一个点跟第一个点连起来，折线不会
多边矩形演示：
<svg style="width: 400px;height: 400px">
<polygon points="30,30 80,30 80,80 30,80" style="stroke-width: 2;fill: white;stroke: black"></polygon>
</svg>
折线演示：
<svg style="width: 400px;height: 400px">
<polyline points="30,30 80,30 80,80 30,80" style="stroke-width: 2;fill: white;stroke: black"></polyline>
</svg>
3、svg内标签之路径。
<path></path>路径一共有1个参数d，但是d里面可以随意移动画笔，但是个人绘制 非常的麻烦，一般借助工具可以绘制非常复杂但是非常好看的图像。
如果感兴趣可以自己查阅资料，这里就不费篇幅阐述它的应用了。
结束语
D3的基础复习就到这里了，以后我们就要应用D3的库，开始绘制各种图形了
这些内容是我在学习中自己的思考，其中有些错误欢迎指正，另外相遇我交谈。
找到我：shiyvcaho
欢迎关注微信公众哈：流星蝴蝶没有剑。
每周更新最新的学习博客