SVG元素和代码解释

SVG中图形元素(graphics element)是可以用来在目标画布上画出图形的元素，包括定义的标准形状，特别是矩形、圆形、椭圆形、直线、折线和多边形等。

1 图形元素

　　SVG中图形元素(graphics element)是可以用来在目标画布上画出图形的元素，包括定义的标准形状，特别是矩形、圆形、椭圆形、直线、折线和多边形等。

　　(1) 矩形

　　矩形用元素rect来表达
　　代码：
　　含意：绘制宽200像素，高100像素，填充色为绿色的矩形

　　(2) 圆形

　　圆形用元素circle来表达
　　代码：
　　含意：绘制半径为50像素，填充色为蓝色的圆形

　　(3) 线段

　　线段用元素line来表达
　　代 码：
　　含意：从点(50,50)到点(200,200)绘制一条蓝色10像素宽的线段

　　(4) 椭圆

　　椭圆用元素ellipse来表达
　　代码：
　　含意：绘制x轴半径为100像素，y轴半径为50像素，边线为绿色的椭圆

　　(5) 折线

　　折线用元素polyline来表达
　　代码：
　　含意：从点(100,0)开始，经过点(93,16), (72,26), (43,25), (13,11),(-11,-13),(-16,-93),(0,-100), (16,-93),(26,72),(25,-43),(11,43),(-13,11), (-43,25),( -72,26),( -93,16)，最后到点(-100,0)绘制一条线宽为1像素的绿色折线

　　(6) 多边形

　　多边形用元素polygon来表达
　　代码：
　　含意：以(100,100) (150,100) (300,200) (50,200)四个点为顶点绘制填充色为蓝色的多边形，该多边形是一个梯形

　　(7) 路径

　　路径用元素path来表达
　　代码：
　　含意：按 动作定义一条填充色为绿色的路径“移动原点到(200,200)，向Y方向直线运动100，向X方向直线运动200，向Y的反方向直线运动100,向X的反方向直线运动200"，该路径表达了一个矩形

2 容器元素

　　容器元素用于将不同的元素组合起来使用。
　　元素作为一个容器元素使用，可以将稍后要使用的元素集合起来。它通常和元素结合使用。
　　元素作为一个容器对象使用，将相关的图形对象组合起来。在一个大型或复杂的图形中使用元素非常有用。

3 图形引用元素

　　图形引用元素(graphics referencing element)用对不同文档或元素的引用作为其图形内容的图形元素。
　　元素用于将其它图像文件包括在一个已定义的矩形中。
　　元素可以与这样的元素配合使用，来实例化前面定义但还没有表现的图形对象。

4 文本内容

　　元素文本内容元素(text content element)是一个可以定义文本串的画在画布上的SVG元素，SVG文本内容元素有：,,,和等。

与元素相比较，

　　(1) 可以 拥有自己的位置属性

　　即x和y属性，所有

　　(2) 可以拥有自己的高宽属性

　　即width和height属性，所有超出

　　(3) 可以拥有显现属性

　　即display属性，修改该属性可以让所有