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

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

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

<svg width="600" height="300" version="1.1"> </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 ： 指定矩形的样式

实例：

<h1>正规矩形示例</h1>
    <svg width="600" height="300">
        <rect x="25" y="50" width="500" height="200" style="fill: red;"></rect>
    </svg>
    <h1>圆角矩形示例</h1>
    <svg width="600" height="300">
        <rect x="25" y="50" width="500" height="200" style="fill: blue;" rx="30" ry="60"></rect>
    </svg>

正规矩形示例

圆角矩形示例

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

实例

<h1>圆形示例</h1>
    <svg width="600" height="300">
        <circle cx="125" cy="150" r="100"  style="fill: red;"/>
    </svg>

圆形示例

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

实例

<h1>椭圆示例</h1>
    <svg width="600" height="300">
        <ellipse cx="125" cy="150" rx="100" ry="60"  style="fill: red;" />
    </svg>

椭圆示例

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

实例

<h1>线段示例</h1>
        <svg width="600" height="300">
        <line x1="125" y1="150" x2="200" y2="100"  style="stroke:red;stroke-width:4;" />
    </svg>
    <!--因为csdn内置的解释器读不了svg的样式，所以效果看不到了，话说回来，大家还得看看SVG的样式，和常规css有一定的差异-->

线段示例

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

<h1>多边形实例</h1>
    <svg width="600" height="300">
        <polygon points="200,30 150,40 120,50 80,100 60,50 20,15"  style="stroke:red;stroke-width:4;fill:yellow;" />
    </svg>
    <h1>折线实例</h1>
    <svg width="600" height="300">
        <polyline points="200,30 150,40 120,50 80,100 60,50 20,15"  style="stroke:red;stroke-width:4;fill:yellow;" />
    </svg>

多边形实例

折线实例

暂时到这里，来个BUG