SVG语法教程指南中文版

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

来源：SVG中国()

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文本内容元素有：,,,和等。

5 SVG文档片断

SVG文档片断(SVG document fragment)是以

与元素相比较，

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

即x和y属性，所有

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

即width和height属性，所有超出

(3) 可以拥有显现属性

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

SVG语法教程指南中文版

来源：SVG中国()

翻译：蔡发明

英文版：/svg/default.asp

(对照W3C官方英文版格式,再做一次翻译修正，最末部分还待翻译完成)