SVG的基本图形形状

[size=medium]和其它矢量化图形工具一样，SVG也有一些预定义的基本形状可供我们直接使用，这些基本形状称为元素，就像HTML文档中的table元素一样，下面是SVG标准里预先定义好的基本形状元素：矩形<rect>、圆形<circle>、椭圆<ellipse>、直线<line>、折线<polyline>、多边形<polygon>、描绘路径<path> 等。
<line>：通过指定开始点(x1，y1)、结束点(x2，y2)和宽度stroke定义一条直线，语法如下：<line x1="127" y1="65" x2="127" y2="200" style="stroke：rgb(0，0，0)；stroke-width：2"/> 要想得到很细的线，可以指定stroke-width为大于0小于1的数值。
<circle>：在SVG中，要定义一个圆，只需要指顶圆心的坐标、半径即可，也可以使用样式单属性定义外观的样式，语法如下： <circle cx="143" cy="163" r="84" style="fill：rgb(192，192，255)；stroke：rgb(0，0，128)； stroke-width：1"/> 。
<ellipse>：定义椭圆和定义圆很相象，指定圆心，X，Y轴的半径即可： <ellipse cx="160" cy="163" rx="101" ry="81" style="fill：rgb(192，192，255)；stroke：rgb(0，0，128)；stroke-width：1"/> 。
<polygon>：这个标记用来指定连续的点的坐标来，定义多边形。语法如下： <polygon points="223.5，123.034 276，213.966 171，213.966" style="fill：rgb(126，14，83)；stroke：rgb(0，0，128)；stroke-width：1"/> 。
<polyline>：这个标记通过指定各个点的坐标，来定义一条折线，格式如下： <polyline points="100，200 100，20 10，200 100，20" style="stroke:rgb(64，64，64)；stroke-width：1"/> 。
<path> ：是SVG中最复杂的，它创建最复杂的形状，也是最有用、用的最多的，<path d="M10 20 L110 20 L110 120 L10 120" style="fill：rgb(0，0，22)；/> <path>标记的d属性用来描述下面要画的是多类型的形状，M10 20表示画笔移动到点10，20，L110 20表示从当前点画一条线到坐标110，20等，由于path标记采用的格式很复杂，因此，可以画出很复杂的形状。[/size]

study url : http://www.w3school.com.cn/svg/svg_rect.asp