SVG几何图形
(1) 圆形<circle>
属性：
cx: 数值; //圆心横坐标 cy: 数值; //圆心纵坐标 r: 数值; //圆半径 stroke: color; //画笔颜色 stroke- 数值; //画笔宽度 fill: color; //填充颜色
注：若忽略cx,cy，那么圆点会被设置为 (0, 0)
(2) 矩形<rect>
属性：
x: 数值; //定义矩形的左侧位置 y: 数值; //定义矩形的顶端位置 数值; //矩形宽度 height: 数值; //矩形高度 stroke: color; //画笔颜色 stroke- 数值; //画笔宽度 fill: color; //填充颜色 opacity: 数值; //填充整个图形颜色的透明度，即内部区域并包括stroke画笔的宽度，范围（0-1） fill-opacity | opacity: 数值; //只填充内部区域颜色透明度，范围（0-1） stroke-opacity: 数值; //画笔颜色透明度，范围（0-1）
(3) 椭圆<eclipse>
属性：
cx: 数值; //椭圆中心横坐标 cy: 数值; //椭圆中心纵坐标 rx: 数值; //椭圆水平半径 rx: 数值; //椭圆垂直半径 stroke: color; //画笔颜色 stroke- 数值; //画笔宽度 fill: color; //填充颜色
(4) 直线<line>
属性：
x1: 数值; //x 轴定义线条的开始 y1: 数值; //y 轴定义线条的开始 x2: 数值; //x 轴定义线条的结束 y2: 数值; //y 轴定义线条的结束 stroke: color; //画笔颜色 stroke- 数值; //画笔宽度 fill: color; //填充颜色
(5) 多边形<polygon>
属性：
points: 数值; //三个或三个以上x,y坐标，每组中间用空格隔开 stroke: color; //画笔颜色 stroke- 数值; //画笔宽度 fill: color; //填充颜色 fill-rule: nonzero | evenodd | inherit
规则：
nonzero 规则:字面意思是“非零”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点情况，图形路径顺时针为从左到右，逆时针为从右到左。从0开始计数，
路径从左向右穿过射线则计数加1，从右向左穿过射线则计数减1。得出计数结果后，如果结果是0，则认为点在图形外部，否则认为在内部。 巧记：内部区域计数结果不是零则填充颜色。 evenodd 规则:字面意思是“奇偶”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点的数量。如果结果是奇数则认为点在内部，是偶数则认为点在外部。 巧记：奇在内，偶在外。
注：fill-rule若无指定规则，则默认为nonzero。
(6) 曲线<polyline>
属性：
points: 数值; //2个或2个以上x,y坐标，每组中间用空格隔开 stroke: color; //画笔颜色 stroke- 数值; //画笔宽度 fill: color; //填充颜色，若没有填充颜色，中间区域则会变成黑色。 注意：每组y与下一组的x数值要一致。
(7) 路径<path>
下面的命令可用于路径数据： M = moveto L = lineto H = horizontal lineto V = vertical lineto C = curveto S = smooth curveto Q = quadratic Bézier curve T = smooth quadratic Bézier curveto A = elliptical Arc Z = closepath 注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
属性：
M x,y: 移动到坐标（x,y）处 H n: 绘制一条长n像素的水平线。n为负表示向左绘制；n为正表示向右绘制。 V n: 绘制一条长n像素的垂直线。n为负表示向上绘制；n为正表示向下绘制。 L x,y: 绘制一条从当前位置到坐标（x,y）的线段。 C x1 y1 x2 y2 x y: 绘制一条从当前位置到坐标（x,y）的贝塞尔曲线，将（x1,y1）作为曲线起点的控制点，并将（x2,y2）作为曲线终点的控制点。 A rx ry x-axis-rotation large-arc-flag sweep-flag x y: 绘制一条从当前位置到（x,y）的圆弧，该圆弧所属椭圆的大小和方向由两个半径（rx和ry）
以及x-axis-rotation值决定，其中x-axis-rotation值为绕x轴旋转的角度，large-arc-flag和sweep-flag的取值为0或1，指定哪条抛物线曲线渲染到屏幕上。
(8) 文本<text> 参考网址：http://www.runoob.com/svg/svg-text.html
属性：
x: 数值; //文字起始横坐标 y: 数值; //文字起始纵坐标 fill: color; //文字颜色 transform: rotate(angle x,y); //旋转角度angle和旋转坐标。 <defs></defs>: 元素用于预定义一个元素使其能够在SVG图像中重复使用 <use></use>: 在<defs>元素中定义的图形不会直接显示在SVG图像上。要显示它们需要使用<use>元素来引入它们 <g></g>: 要引用<g>元素，必须在<g>元素上设置一个ID，通过ID来引用它。<use>元素通过xlink:href属性来引入<g>元素。注意在ID前面要添加一个#。
(9) SVG模糊效果 参考网址：http://www.w3school.com.cn/svg/svg_filters_gaussian.asp
属性：
<filter>标签: id属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用） filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符 <feGaussianBlur> 标签进行定义滤镜效果。fe后缀可用于所有的滤镜 <feGaussianBlur> 标签的 stdDeviation 属性可定义模糊的程度 in="SourceGraphic" 这个部分定义了由整个图像创建效果
例如：
1 <defs> 2 <filter id="Gaussian_Blur"> 3 <feGaussianBlur in="SourceGraphic" stdDeviation="3" /> 4 </filter> 5 </defs> 6 <ellipse cx="200" cy="150" rx="70" ry="40" 7 style="fill:#ff0000;stroke:#000000; 8 stroke-2;filter:url(#Gaussian_Blur)"/>