SVG元素代码解释.docVIP

SVG元素和代码解释 SVG中图形元素(graphics element)是可以用来在目标画布上画出图形的元素，包括定义的标准形状，特别是矩形、圆形、椭圆形、直线、折线和多边形等。文章介绍了SVG元素的代码及其含意。SVG元素分为图形元素、容器元素、图形引用元素、文本、SVG文档片断内容。 来源： HYPERLINK / SVG中国(ChinaSVG.COM) HYPERLINK /  1 图形元素 　　SVG中图形元素(graphics element)是可以用来在目标画布上画出图形的元素，包括定义的标准形状，特别是矩形、圆形、椭圆形、直线、折线和多边形等。 　　(1) 矩形 　　矩形用元素rect来表达　　代码：rect width=200 height=100 fill=green/　　含意：绘制宽200像素，高100像素，填充色为绿色的矩形 　　(2) 圆形 　　圆形用元素circle来表达　　代码：circler=50 fill=blue/　　含意：绘制半径为50像素，填充色为蓝色的圆形 　　(3) 线段 　　线段用元素line来表达　　代 码：line xl=50 yl=50 x2=200 y2=200 stroke=blue stroke-width=10/　　含意：从点(50,50)到点(200,200)绘制一条蓝色10像素宽的线段 　　(4) 椭圆 　　椭圆用元素ellipse来表达　　代码：ellipse rx=100 ry=50 stroke=green/　　含意：绘制x轴半径为100像素，y轴半径为50像素，边线为绿色的椭圆 　　(5) 折线 　　折线用元素polyline来表达　　代码：polyline points=100,0 93,16 72,26 43,25 13,11 -11,-13 -25,-43 -26,-72 -16,-93 0,-100 16,-93 26,-72 25,-43 11,-13 -13,11 -43,25 -72,26 -93,16 -100,0 stroke=green stroke-width=1 fill= none/　　含意：从点(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来表达　　代码：polygon points=100,100 150,100 300,200 50,200 fill=blue/　　含意：以(100,100) (150,100) (300,200) (50,200)四个点为顶点绘制填充色为蓝色的多边形，该多边形是一个梯形 　　(7) 路径 　　路径用元素path来表达　　代码：path d=m200,200 10,100 l200,0 10,-100 l-200,0 fill=green/　　含意：按 动作定义一条填充色为绿色的路径“移动原点到(200,200)，向Y方向直线运动100，向X方向直线运动200，向Y的反方向直线运动100,向X的反方向直线运动200，该路径表达了一个矩形 2 容器元素 　　容器元素用于将不同的元素组合起来使用。　　defs元素作为一个容器元素使用，可以将稍后要使用的元素集合起来。它通常和use元素结合使用。　　g元素作为一个容器对象使用，将相关的图形对象组合起来。在一个大型或复杂的图形中使用g元素非常有用。 3 图形引用元素 　　图形引用元素(graphics referencing element)用对不同文档或元素的引用作为其图形内容的图形元素。　　image元素用于将其它图像文件包括在一个已定义的矩形中。　　use元素可以与defs这样的元素配合使用，来实例化前面定义但还没有表现的图形对象。 4 文本内容 　　元素文本内容元素(text content element)是一个可以定义文本串的画在画布上的SVG元素，SVG文本内容元素有：text,tspan,tref,textPath和altGlyph等。 5 SVG文档片断 　　SVG文档片断(SVG document fragment)是以svg元素开头的XML文档子树。SVG文档片断可以包含独立的SVG文档，或是另一个SVG文档片断。当一个svg元素是另一个svg元素的子元素，就会有两个SVG文档片断，每个svg元素拥有一个片断。以下用svg元素来代表SV