什么是SVG?

SVG 可缩放矢量图形（Scalable Vector Graphics）。
它是一种用来描述二维矢量图形的 XML 标记语言。
它可以用来在网页中展示和绘制一些特殊图形。
阿里巴巴开源的iconfont库中便有使用。
svg绘制的图形相对与普通图片可以无限缩放不失真。
d3.js是以svg为基础开发的

一、用svg绘制一个矩形

<svg height="500" width="500">
        <rect x=10 y=10 height=50 width=100 
        	style="fill:pink;stroke:yellow;stroke-width:2">
        </rect>
</svg>

1. 定义了一个长高500px的svg绘制区域。
2. 绘制了一个高50，宽100的rect(矩形)。
3. 设置颜色为pink，边框宽度2，边框颜色yello。
4. 从左边（10，10）开始绘制，默认原点为（0，0）。
   效果
   
   可以通过 rx，ry设置为圆角矩形

二、用svg绘制一个圆形

<circle cx="250" cy="250" r="100" style="fill:pink;stroke:yellow;stroke-width:2"/>

以（250，250）为圆心，100px为半径画一个圆形

三、用svg绘制一个椭圆形

<ellipse cx="300" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2"/>

调整rx，ry尺度进行调整

四、绘制一个多边形

<polygon points="200,10 250,190 160,210" 
  style="fill:lime;stroke:purple;stroke-width:1"/> 

通过 points 传入一个点数组，svg绘制时将点连接起来，构成图形，按传入的点数量可绘制任意多边形，两个点将连线线。

五、绘制折线

传入一个点数组，svg将连接所有点，注意不用使用颜色填充

<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" 
  style="fill:none;stroke:pink;stroke-width:3" /> 

六、svg绘制文字

<text x="0" y="30"  style="fill:pink;font-size:30">这是一段文字</text>

七、绘制直线

分别定义起始点，结束点的坐标，完成绘制

<line x1="0" y1="0" x2="500" y2="500"
            style="stroke:pink;stroke-width:2"/>

八、路径path

表示从点到点的路径
这个比较复杂，点坐标不再是以原点坐标为准，包含坐标修饰符

• M = moveto （移动）
• L = lineto (直线)
• H = horizontal lineto （水平直线）
• V = vertical lineto （垂直直线）
• C = curveto （曲线）
• S = smooth curveto （光滑曲线）
• Q = quadratic Belzier curve （二次Belzier曲线）
• T = smooth quadratic Belzier curveto （光滑二次贝塞尔曲线曲线）
• A = elliptical Arc （圆弧）
• Z = closepath （闭合路径）
  坐标修饰符不同 参数也不同

<path d="M250 150 L150 350 L350 350 Z" />
//表示从(250,150) 以直线连接到(150,350)
//再以直线连接到（350,350） 最后闭合

九、SVG图形的常用属性

• x，y 绘制起点
• cr，cy 圆形的圆心
• r，rx，ry 圆的半径，x方向曲度，y方向曲度
• fill 填充色
• points 点数组
• stroke 边框颜色
• font-size 字体大小
• text-anchor = start | middle | end | inherit 文本与绘制点的对齐方式
• stroke-width 边框宽度
  还有一些高级用法（滤镜，模糊，阴影…）可以去w3c看文档。