SVG元素和代码解释

SVG元素和代码解释
2008.08.27 万里
　 　SVG中图形元素(graphics element)是可以用来在目标画布上画出图形的元素，包括定义的标准形状，特别是矩形、圆形、椭圆形、直线、折线和多边形等。文章介绍了SVG元素的代码及其含意。SVG元素分为图形元素、容器元素、图形引用元素、文本、SVG文档片断内容。

来源：SVG中国(ChinaSVG.COM)

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>元素来代表SVG文档片断。
　　与<g>元素相比较，<svg>元素有一些特别有用的属性：

　　(1) 可以 拥有自己的位置属性
　　即x和y属性，所有<svg>元素的子元素的位置完全相对于<svg>元素的位置。这样只要改变<svg>元素的x或y就可以让所有子元素同时发生偏移。

　　(2) 可以拥有自己的高宽属性
　　即width和height属性，所有超出<svg>元素高宽的子元素是不会显示出来的。这样一些拉幕动画就可以实现了。

　　(3) 可以拥有显现属性
　　即display属性，修改该属性可以让所有<svg>元素的子元素一起出现或隐藏。这样整体一起的出现和消失就方便很多。

关于作者
　　万里，1997年7月毕业于西北大学化学工程与机械专业，1998年8月进入金山公司担任软件工程师，参加WPS多个版本开发工作，其中WPS2000荣获国家科技进步二等奖。
　　2003年9月入哈尔滨工业大学软件学院攻读软件工程硕士。

(THE END)