css3中的svg

SVG 是一种使用XML 描述 2D 图形的语言
Canvas 通过avaScript 来绘制 2D 图形
SVG 基于XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加JavaScript 事件处理器.
在SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 anvas 中，一旦图形
被绘制完成，它就不会继续得到浏览器的关注。如果其位
置发生变化，那么整场景也需要重新绘制，包括任何或许
已被图形覆盖的对象。
cavas：依赖分辨率、不支持事件处理器、弱的文本渲染能力、能够以.png或.jpg格式保存结果图像、最适合图像密集游戏
svg：不依赖分辨率、支持时间处理器、不适合游戏应用
<svg width='500' height='500'>
<rect x="100" y="100" width"150" height="100" fill="red" stroke="green"> ---绘制矩形

<svg width="500" height="500">
    <rect x="100" y="100" width="150" height="100" fill="red" stroke="green" stroke-width="2" rx="10"></rect>
</svg>----------绘制圆角矩形
- x/y：绘图位置，
- width/height：矩形长宽，
- fill：填充颜色，默认黑色，
- stroke：描边的颜色。
- stroke-width：描边的宽度。
- rx/ry：描边的圆角。

绘制圆：<svg width="500" height="500">
     <circle cx="150" cy="200" r="50"></circle>
</svg>
- cx/cy：圆绘制的位置，圆心位置。
- r：圆的半径。

绘制椭圆：
<svg width="500" height="500">
   <rect x="100" y="300" width="100" height="50" rx="50" ry="25"></rect>
</svg>
- cx/cy：椭圆绘制的位置，圆心的位置。
- rx/ry：椭圆的半径。
绘制直线：
<svg width="500" height="500">
    <line x1="100" y1="100" x2="200" y2="100" stroke="red"></line>
</svg>
- x1/y1：起点
- x2/y2：终点
- stroke：线条颜色，必须有
绘制折线：
<svg width="500" height="500">
    <polyline points="100 150 300 150 300 200" stroke="red" fill="none"></polyline>
</svg>
- points：设置所有折线的点。
- fill：是否填充，默认填充。
绘制多边形：
<svg width="500" height="500">
    <polyline points="100 300 300 300 300 350 100 300" stroke="red" fill="none"></polyline>
</svg>-------------多边形就是最后一个点和第一个点一样