5分钟快速学会使用SVG

svg 可缩放矢量图形（Scalable Vector Graphics）,是一种用于描述二维的矢量图形，基于 XML 的标记语言。

相对于png/jpg，svg具备以下优点：

1.  1.矢量图形 ——放大缩小不失真
2.  2.可编辑 —— 根据需要可直接通过代码修改
3.  3.尺寸小，可压缩性强

使用方法：

<svg width="100%" height="800">
	<path d="M10 10 L75 10 L75 75" stroke="#333" fill="transparent" />
</svg>

svg基本形状

1.矩形 <rect>

例如：<rect width="100" height="100" x="50" y="100" rx="10" ry="10" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0);opacity: 0.5;" />
属性讲解：

1. width,height 宽高属性
2. x,y 位置属性
3. rx,ry 圆角属性
4. style 样式属性(style可以省略)：fill——填充色，stroke——描边色，stroke-width——描边宽度，opacity——透明度

效果:

2.圆形 <circle>

例如：<circle cx="200" cy="200" r="50" stroke="#333" fill="red" opacity="0.2" />
属性讲解：

1. cx,cy 圆心位置
2. r 圆半径

效果：

3.椭圆 <ellipse>

例如：<ellipse cx="300" cy="350" rx="200" ry="50" fill="green" />
属性讲解：

1. cx,cy 圆心位置
2. rx 椭圆x轴半径，ry 椭圆y轴半径

效果：

4.线 <line>——注意只能有起点终点2个坐标，多个点用路径path或折线polyline

例如：<line x1="0" y1="0"  x2="400" y2="400"  stroke="#333" />
属性讲解：

1. x1,y1 起点坐标
2. x2,y2 起点坐标

效果：

5.折线 <polyline>

例如：<polyline points="0,0 50,100 100,300 500,0" stroke="#333"  fill="transparent" />
属性讲解:

1. points 折线点集合，坐标之间空格分隔
2. fill="transparent" 填充透明之后，可用来做折线，多线段

效果：

6.多边形 <polygon>

例如：<polygon points="800,0 800,300 800,380 900,0" stroke="red"   />
属性讲解:

1. 折线polyline不闭合；多边形 polygon会自动闭合路径，形成形状

效果：

7.路径 <path>

例如：<path d="M10 10 L75 10 L75 75 Z" stroke="#333" fill="transparent" /> 
属性讲解: 

1. d 路径的属性集合,属性字母大写表示绝对定位，小写为相对定位
2. M|m  moveto —— 画笔移动到起点位置，案例起点位置是(10 10)
3. L|l  lineto —— 画笔连线到的拐点位置，案例拐点分别为(75,10),(75,75)
4. H|h  horizontal lineto ——水平线
5. V|v  vertical lineto ——垂直线
6. Z|z  closepath —— 闭合路径，起点和最后一个拐点会被连接，形成形状
7. C|c  curveto ——画弯曲的线
8. S|s  smooth curveto——画平滑弯曲的线
9. A|a  elliptical Arc ——画椭圆弧线
10. Q|q quadratic Belzier curve——画二次方程线
11. T|t smooth quadratic Belzier curveto ——画平滑二次方程线

效果：