关于HTML5用SVG画图
SVG在HTML5中的应用
SVG（Scalable Vector Graphics）是用来绘制矢量图的HTML5标签。只要定义好XML属性就能够获得与其一致的图像元素。
使用SVG之前先将标签加入到HTML body中。就像其他的HTML标签一样，你可以为SVG标签为之添加ID属性。也可以为之添加css样式，例如“border-style:solid;border-width:2px;”。SVG标签跟其它的HTML标签有通用的属性。你可以用height="100px" width="200px" 为其添加高度和宽度。
一、 用SVG画线条：
<svg id="svgLineTutorial" style="border-style:solid;border-width:2px;" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg">
<line x1="10" y1="20" x2="100" y2="200" style="stroke:Green;stroke-width:2"/>
</svg>
其中：指定x1,y1,x2,y2值来代表起点终点坐标，在style属性中使用“stroke:Green;”为线条指定颜色。用stroke-width:2为线条设置宽度。
二、 用SVG画圆：
<svg id="svgCircleTutorial" height="250" xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle" cx="55" cy="55" r="50" fill="#219E3E" stroke="#17301D" stroke-width="2" />
</svg>
其中：圆的中心cx="55" cy="55"，半径r="50"，fill="#219E3E"填充颜色，stroke="#17301D" stroke-width="2"线条颜色与宽度
三、 用SVG画矩形
<svg id="svgRectangleTutorial" height="200" xmlns="http://www.w3.org/2000/svg">
<rect id="myRectangle" width="300" height="100" stroke="#17301D" stroke-width="2" fill="blue" fill-opacity="0.5" stroke-opacity="0.5"/>
</svg>
其中：stroke="#17301D" stroke-width="2"定义边框的颜色和宽度
四、 SVG画椭圆
<svg id="svgEllipseTutorial" height="150" xmlns="http://www.w3.org/2000/svg">
<ellipse id="myEllipse" cx="120"
cy="60" rx="100" ry="50"
style="fill:#3F5208;stroke:black;stroke-width:3"/>
</svg>
其中：中心坐标cx="120" cy="60"，长轴短轴半径 rx="100" ry="50"
五、 SVG画多边形
<svg id="svgPolygonTutorial" height="200" xmlns="http://www.w3.org/2000/svg">
<polygon id="myPolygon" points="10,10 75,150 150,60" style="fill:blue;stroke:black;stroke-width:3"/>
</svg>
points="10,10 75,150 150,60"定义三个顶点(10,10),(75,150),(150,60)
举例：
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
</body>
</html>
