SVG基本图形
在HTML中<SVG>元素是用来画图的，下面是一个SVG的例子：
<!DOCTYPE html> <html> <body> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg> </body> </html>
在上面这个例子中首先通过<SVG>元素的width和height属性来指定画布的宽度和高度
网页的左上角是画布的原点，向右为x轴方向，向下为y轴方向
<circle>元素代表一个圆，cx和cy代表圆心的坐标; r代表圆的半径;stroke代表圆形边框线的颜色
stroke-witdth代表边框线的粗细，fill代表内部填充色。
上面的例子执行的效果如下：
<svg width="400" height="100"> <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" /> </svg>
这个例子是画一个矩形，<rect>元素代表矩形，width和height代表矩形宽度和高度，恰好和画布大小一样
style=
"fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"
这句话中style属性指定了矩形的样式（在标签里给style属性赋值的做法被称为内联CSS，后面CSS部分会讲）
fill代表内部填充色，采用RGB形式（RGB就是通过红绿蓝三原色的不同值来表示各种颜色）
stroke-width代表矩形边框线的粗细
stroke代表矩形边框线的颜色
<svg width="400" height="180"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.2" /> </svg>
上面这段代码是画一个圆角矩形，x和y属性指定矩形左上角的坐标，
rx和ry属性指定圆角的弧度，rx和ry越大代表弧度越大，越接近圆形
width和height代表矩形的宽度和高度
在style属性中opacity代表不透明度，越大越不透明
<svg width="300" height="200"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> </svg>
上面这个例子是画一个多边形（五角星）
points指定多边型的顶点，具体画法是首尾相连的直线线段构成的闭合多边形形状。最后一点连接到第一点
fill指的是内部填充色
fill-rule指的是填充方式，其中evenodd值意思是只填充内部，
具体的说是要判断一个点是否在图形内，该点作任意方向的一条射线，然后检测射线与图形路径的交点的数量。如果结果是奇数则认为点在内部，是偶数则认为点在外部。
<svg height="210" width="500"> <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" /> </svg>
上面的代码是画一条直线，x1和y1是直线的起点，x2和y2是直线的终点。
<svg height="180" width="500"> <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" /> </svg>
上面的代码通过<polyline>元素画了一条由线段组成的台阶，注意和五角星例子中的<polygon>元素不同
<polyline>元素不会自动把最后一点连接到第一个点!!!
<path>元素用来画一条路径，在<path>元素中用一些常用的关键字如下：
M代表移动到某个点
L代表连一条直线到某个点
Z代表从终点连接回起点
所有和外观无关的信息都以字符串的形式赋给d属性。
<svg height="210" width="400"> <path d="M150 0 L75 200 L225 200 Z" stroke="red" stroke-width="3" fill="none" />
这段代码的意思是移动到（150,0），然后从(150,0)出发连接一条直线到(75,200)，
再从(75,200)连接一条直线到终点(225,200)
最后从终点连接出发点
线条颜色红色，线条宽度3像素，不填充内部区域（fill="none"）
<svg height="30" width="200"> <text x="0" y="15" fill="red">I love SVG!</text> </svg>
上面这段代码是在(0,15)的位置用红色写出"I Love SVG"
<svg height="140" width="500"> <ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" /> </svg>
上面这段代码是画一个椭圆，cx,cy代表圆心坐标，rx和ry代表横轴和纵轴的长度。
