SVG的基本图形形状

和其它矢量化图形工具一样，SVG也有一些预定义的基本形状可供我们直接使用，这些基本形状称为元素，就像HTML文档中的table元素一样，下面是SVG标准里预先定义好的基本形状元素：矩形<rect>、圆形<circle>、椭圆<ellipse>、直线<line>、折线<polyline>、多边形<polygon>、描绘路径<path>等。

<line>：通过指定开始点(x1，y1)、结束点(x2，y2)和宽度stroke定义一条直线，语法如下：<linex1="127"y1="65"x2="127"y2="200"style="stroke：rgb(0，0，0)；stroke-width：2"/>要想得到很细的线，可以指定stroke-width为大于0小于1的数值。

<circle>：在SVG中，要定义一个圆，只需要指顶圆心的坐标、半径即可，也可以使用样式单属性定义外观的样式，语法如下：<circlecx="143"cy="163"r="84"style="fill：rgb(192，192，255)；stroke：rgb(0，0，128)；stroke-width：1"/>。

<ellipse>：定义椭圆和定义圆很相象，指定圆心，X，Y轴的半径即可：<ellipsecx="160"cy="163"rx="101"ry="81"style="fill：rgb(192，192，255)；stroke：rgb(0，0，128)；stroke-width：1"/>。

<polygon>：这个标记用来指定连续的点的坐标来，定义多边形。语法如下：<polygonpoints="223.5，123.034276，213.966171，213.966"style="fill：rgb(126，14，83)；stroke：rgb(0，0，128)；stroke-width：1"/>。

<polyline>：这个标记通过指定各个点的坐标，来定义一条折线，格式如下：<polylinepoints="100，200100，2010，200100，20"style="stroke:rgb(64，64，64)；stroke-width：1"/>。

<path>：是SVG中最复杂的，它创建最复杂的形状，也是最有用、用的最多的，<pathd="M1020L11020L110120L10120"style="fill：rgb(0，0，22)；/><path>标记的d属性用来描述下面要画的是多类型的形状，M1020表示画笔移动到点10，20，L11020表示从当前点画一条线到坐标110，20等，由于path标记采用的格式很复杂，因此，可以画出很复杂的形状。

studyurl:http://www.w3school.com.cn/svg/svg_rect.asp