SVG几何图形

(1) 圆形<circle>

属性：

　　cx: 数值; //圆心横坐标　　cy: 数值; //圆心纵坐标　　r: 数值; //圆半径 　　stroke: color; //画笔颜色　　stroke-width: 数值; //画笔宽度　　fill: color; //填充颜色

注：若忽略cx,cy，那么圆点会被设置为 (0, 0)

(2) 矩形<rect>

属性：

x: 数值; //定义矩形的左侧位置y: 数值; //定义矩形的顶端位置width: 数值; //矩形宽度height: 数值; //矩形高度stroke: color; //画笔颜色stroke-width: 数值; //画笔宽度fill: color; //填充颜色opacity: 数值; //填充整个图形颜色的透明度，即内部区域并包括stroke画笔的宽度，范围（0-1）fill-opacity | opacity: 数值; //只填充内部区域颜色透明度，范围（0-1）stroke-opacity: 数值; //画笔颜色透明度，范围（0-1）

(3) 椭圆<eclipse>

属性：

cx: 数值; //椭圆中心横坐标cy: 数值; //椭圆中心纵坐标rx: 数值; //椭圆水平半径rx: 数值; //椭圆垂直半径stroke: color; //画笔颜色stroke-width: 数值; //画笔宽度fill: color; //填充颜色

(4) 直线<line>

属性：

x1: 数值; //x 轴定义线条的开始y1: 数值; //y 轴定义线条的开始x2: 数值; //x 轴定义线条的结束y2: 数值; //y 轴定义线条的结束stroke: color; //画笔颜色stroke-width: 数值; //画笔宽度fill: color; //填充颜色

(5) 多边形<polygon>

属性：

points: 数值; //三个或三个以上x,y坐标，每组中间用空格隔开stroke: color; //画笔颜色stroke-width: 数值; //画笔宽度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-width: 数值; //画笔宽度fill: color; //填充颜色，若没有填充颜色，中间区域则会变成黑色。注意：每组y与下一组的x数值要一致。

(7) 路径<path>

下面的命令可用于路径数据：M = moveto L = linetoH = horizontal linetoV = vertical linetoC = curvetoS = smooth curvetoQ = quadratic Bézier curveT = smooth quadratic Bézier curvetoA = elliptical ArcZ = 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> 参考网址：

属性：

x: 数值; //文字起始横坐标y: 数值; //文字起始纵坐标fill: color; //文字颜色transform: rotate(angle x,y); //旋转角度angle和旋转坐标。
     : 元素用于预定义一个元素使其能够在SVG图像中重复使用
     : 在
     
      元素中定义的图形不会直接显示在SVG图像上。要显示它们需要使用
      
       元素来引入它们
       : 要引用
       
        元素，必须在
        
         元素上设置一个ID，通过ID来引用它。
         
          元素通过xlink:href属性来引入
          
           元素。注意在ID前面要添加一个#。

(9) SVG模糊效果参考网址：

属性：


     
      标签: id属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符
      
        标签进行定义滤镜效果。fe后缀可用于所有的滤镜
       
         标签的 stdDeviation 属性可定义模糊的程度in="SourceGraphic" 这个部分定义了由整个图像创建效果

例如：