SVG中常用基本形状教程
SVG的基础形状矩形（rect）、圆（circle）、椭圆（ellipse）、线段（line）、折线（polyline）和多边形（polygon），本文介绍了SVG中这些常用基本形状的语法及教程。
一、矩形
矩形
x属性定义了矩形左上角顶点在用户坐标系X轴上的坐标，缺省值为 0；
y属性定义了矩形左上角顶点在用户坐标系 Y轴上的坐标，缺省值为 0；
width和 height属性定义了矩形的宽度和高度，其中任意一个值为 0，矩形都不显示style属性允许我们定义 SVG推荐标准支持的 CSS样式属性。
fill 属性定义了长方形的填充颜色，这里采用的是 rgb 的格式，SVG 也支持颜色名和 16进制的颜色格式，比如:fill:red或 fill:#ff0000。
比如将填充红色，可以用fill=”red” 或用 fill=”rgb(255,0,0)” 亦或用 fill=”#ff0000”。
stroke属性定义边框线，SVG中，如果不定义，边框线没有任何宽度，换句话说，SVG默认边框线宽度为 0，对所有的 SVG的形状都是这样的。
如果需要定义边框线的话，采用这样的确语法格式:stroke:rgb(0,0,128)定义颜色，stroke-width:1定义宽度
我门还可以改变填充颜色的透明度，可以这样写:fill-opacity: 0.1，透明度范围是从 0到 1
也可以定义整个元素的透明度，opacity:0.5，该透明度对填充和边框线都有效
也可以单独定义边框线的透明度：stroke-opacity:0.8
定义圆角矩形，使用 rx，ry属性定义圆角的半径。
rx定义圆角矩形的椭圆角在X方向的半轴长度。如果rx的值大于矩形宽度的一半，则取值矩形宽度的一半。
ry定义圆角矩形的椭圆角在Y方向的半轴长度。如果ry的值大于矩形高度的一半，则取值矩形高度的一半。
二、圆
圆
circle cx="143" cy="163" r="84" style="fill:rgb(192，192，255); stroke:rgb(0，0，128); stroke-width:1"/>
其属性定义如下：
cx：是圆心在用户坐标系中的X坐标值，缺省值为0.
Cy:是圆心在用户坐标系中的Y坐标值，缺省值为0.
r:是圆的半径，不允许为负数。如果是0，则圆形不显示。
三、椭圆
椭圆
其常用属性定义如下：
cx:是椭圆中心在用户坐标系中的X坐标值，缺省值为0。
cy:是椭圆中心在用户坐标系中的Y坐标值，缺省值为0。
rx:是X方向上椭圆的半轴长，不允许为负数。如果是0，则椭圆不显示。
ry:是Y方向上椭圆的半轴长，不允许为负数。如果是0，则椭圆不显示。
四、线段
线段
要想得到很细的线，可以指定 stroke-width为大于 0小于 1的数值。
其常用属性定义如下：
X1:是线段起点的X坐标值，缺省值为0。
yl:是线段起点的Y坐标值，缺省值为0。
x2:是线段终点的X坐标值，缺省值为0。
y2:是线段终点的Y坐标值，缺省值为0。
五、折线
折线
其主要属性为points：
points：表示折线各顶点坐标的一个列表，顶点坐标的格式为”x,y，其中x表示顶点的横坐标、x表示顶点的纵坐标，不同顶点坐标之间用空格分开。绘图程序将按照points中的顶点依次绘制图形。
六、多边形
多边形
其主要属性为points
points：points的取值与折线的points一样，但是在绘制多边形的时候，绘图程序不但按照points中的顶点依次绘制图形，而且还将最后一个顶点与第一个顶点连接起来构成一个封闭图形。
注：在 SVG中，允许使用浮点数来达到精确控制。