SVG实战开发学习（二）——基本图形
【1】线段：<line>元素
基本属性：两点确定一条线段，所以线段的基本属性就是它的起止点的坐标。
<svg width="300" height="400">
<!--水平线-->
<line x1="20" y1="20" x2="70" y2="20" style="stroke:black" />
<!--对角线-->
<line x1="20" y1="20" x2="70" y2="70" style="stroke:black" />
<!--垂直线-->
<line x1="20" y1="20" x2="20" y2="70" style="stroke:black" />
</svg>
【2】常用描边（stroke）属性集
1、描边属性可以添加到"style"属性中作为参数：
<line x1="20" y1="20" x2="70" y2="70" style="stroke:black" />
也可以独立地作为图形元素的属性：
<line x1="20" y1="20" x2="70" y2="70" stroke="black" />
二者显示出来的效果是一样的，唯一的不同就在于使用JavaScript进行编程时，取值和设值所使用的方法不太一样。
2、"stroke-width"属性
设置描边的宽度，取值为非负整数，默认值是1。如果设定为0值，就意味着不进行描边操作。
3、stroke-opacity属性
设置描边时的透明度，取值范围是从0~1。
4、stroke-dasharray属性
设置描边采用的线型，使用这个参数就可以产生虚线、点划线等多种线型效果，奇数位的数字代表实线的长度，偶数位的数字代表间隔空白的长度，所以这组数字一般情况下应该是偶数位。
5、stroke-linecap属性
设定描边端点形状，取值可以是"butt"(默认值)、"round"或"square"
6、stroke-linejoin属性
设定描边遇到线条交叉时，交点处的过度形状，取值可以是"miter"（默认值）、"round"或"bevel"。
【3】矩形：<rect>元素
x:表示矩形左上角顶点的X轴坐标，默认值为0；
y:表示矩形左上角顶点的Y轴坐标，默认值为0；
width:表示矩形的宽度，非负，如果为0则不显示该矩形；
height:表示矩形的高度，非负，如果为0则不显示该矩形；
rx:表示圆角矩形x轴方向的圆角半径，非负；
ry:表示圆角矩形y轴方向的圆角半径，非负；
【4】圆：<circle>元素
基本属性：一个圆心和一条半径就能定义一个圆。
cx:表示圆心的x轴坐标，默认值为0；
cy:表示圆心的y轴坐标，默认值为0；
r：圆的半径，非负，如果为0则不显示该圆；
【5】椭圆：<ellipse>元素
基本属性：
cx：表示椭圆中心的X轴坐标，默认值为0；
cy：表示椭圆中心的y轴坐标，默认值为0；
rx：表示椭圆X轴方向的半轴长度，非负，如果为0则不显示该椭圆；
ry：表示椭圆Y轴方向的半轴长度，非负，如果为0则不显示该椭圆；
【6】折线：<polyine>元素
如果需要绘制五角星、立方体等由较多线段组成的图形时，可以使用<polyline>元素。折线是又首尾相连的线段组成，只要指定关键点的坐标，就可以生成折线。
基本属性：
points="点坐标集合"：表示关键点坐标的集合，点集合格式一共有3种，如下所示，SVG解析器会按不同格式自动解析。
注意：在<polylin>元素中如果不是封闭图形，最好设置成"fill:none",否则可能产生意想不到的结果。
【7】多边形：<polygon>元素
在svg中，只要给定多边形的顶点坐标，就能绘制出多边形，如图5-10所示。
基本属性：points="顶点坐标集合"，表示顶点坐标的集合，点集合格式与<polyline>相同。
多边形区域局部填充（"Full-rule" ）
简单的多边形区域填充是很容易的，但是如果多边形的线段出现交叉的时候，就不太容易判断一个点到底是在它的内部还是外部，填充的情况就变得复杂了。svg提供了"Full-rule"属性来决定一个复杂路径的图形如何被填充，取值只有2个："nonzero"（默认值）和"evenodd"
