D3.js 入门教程2 SVG基础 详细 一步步来

最近算是闲下来点了，可以有时间写个博客了，之前写过一篇，本来想着当时就接着写的，不过后来项目实在太紧，也就没有写，原计划是上一篇结束就进入深层次的图表交互的，不过经过之前一个项目的经验，基础还是很重要的，咱们做开发的永远不能停留在为用而用上面，结果突然来了一些奇怪的需求时被手忙脚乱！所以今天我想带来的是SVG方面的基础，我相信有很多伙伴对svg虽然不陌生，但是谈不上多熟悉吧！愿意看的，可以跟着我看一看，花不了多少时间喔！

1.SVG是什么
SVG是矢量图，简单说就是放大也不会失真！

他只是一个标签，width：宽度，height：高度。一般我们在开发中说的画布宽高；version：这是版本，1.1是03年定下来的吧。也是我用的！
七种基本形状元素
SVG定义了七种形状元素，也是构成SVG可视化视图的基本组成；
矩形：rect;圆形：circle;椭圆形：ellipse;线段：line；折线：polyline；多边形：polygon;路径：path；
比较常用的是rect、line、path、好多时候犯懒，一些小部件都是path出来的，哈哈；
矩形
相关属性 ：
x ： 矩形左上角的 x坐标
y ： 矩形左上角的 y坐标
width ： 矩形的宽度
height ： 矩形的高度
rx ： 对于圆角矩形，指定椭圆在x方向的半径
ry ： 对于圆角矩形，指定椭圆在y方向的半径
style ： 指定矩形的样式

实例：

正规矩形示例
    
    
圆角矩形示例
    

正规矩形示例

圆角矩形示例

矩形没有什么要注意的，很简单，不过也很常用； **圆形** 相关属性 ： cx ： 圆心的X坐标 cy ： 圆心的Y坐标 r ： 圆的半径

实例

圆形示例
    

圆形示例

**椭圆形** 相关属性 ： cx ： 椭圆圆心的X坐标 cy ： 椭圆圆心的Y坐标 rx： 椭圆的水平半径 ry： 椭圆的垂直半径

实例

椭圆示例
    

椭圆示例

**线段** 相关属性 ： x1： 起点的x坐标 y1： 起点的y坐标 x2： 终点的x坐标 y2： 终点的y坐标

实例

线段示例
        
    

线段示例

多边形和折线
相关属性 ：
points： 这个参数的值是一系列点的坐标，多边形会将终点和起点连接起来，而折线图不会
实例

多边形实例
    
    
折线实例
    

多边形实例

折线实例

暂时到这里，来个BUG