1.svg绘图与canvas绘图的区别

	cnavas绘图	svg绘图
类型	2D位图（放大会失真）	2D矢量图（放大不会失真）
绘图方式	使用JS代码绘图	使用标签绘图
事件绑定	每个图形不是元素，无法直接绑定事件	每个图形都是元素，可以直接绑定事件监听
应用场合	游戏；特性	图标；地图

2.svg绘图在H5中使用方法

直接在HTML5文档，使用SVG标准
  <svg></svg>   默认一个300*150 inline-block
  矩形    <rect>
  圆形    <circle>
  椭圆    <ecllipse>
  直线    <line>
  折线    <polyline>
  多边形  <polygon>

3.矩形

  <rect width="" height="" x="" y="" fill=""
  fill-opacity="" stroke="" stroke-width="" stroke-opacity=""></rect>

练习：在SVG画布正*创建30*300矩形柱，初始淡红色(#faa)和深红色(#800)边框都半透明，鼠标悬停时，变为不透明.

     提示:修改HTML属性用setAttribute();

    <svg id="s2" width="500" height="400">
        <rect id="r2" width="30" height="300" x="235" y="50" 
        fill="#faa" fill-opacity="0.3" stroke="#800" stroke-opacity="0.3"></rect>
    </svg>
    <script>
        r2.onmousemove = function(){
            this.setAttribute("fill-opacity",1);
            this.setAttribute("stroke-opacity",1);
        }
        r2.onmouseout = function(){
            this.setAttribute("fill-opacity",0.3);
            this.setAttribute("stroke-opacity",0.3);
        }
    </script>

4.圆形

 <circle cx="" cy="" r="" fill="" fill-opacity="" stroke="" stroke-opacity=""></circle>

5.椭圆

<ellipse cx="" cy="" rx="" ry=""></ellipse>
    rx:水平半径
    ry:垂直半径

6.直线

  <line x1="" y1="" x2="" y2="" stroke="" stroke-width="" stroke-linecap="round;square;butt"></line>

7.折线

  一条折线上可以有任意多个连续点，多个点之间用空格隔开
 <polyline points="50,50 100,55  ..." stroke="#000" fill="transparent"/>

8.多边型

多个点之间用空格隔开

<polygon points="50,50 100,55  ..." stroke="#000" fill="transparent"/>

9.文本

  <text font-size="" fill="" stroke="" x="" y="" alignment-baseline="before-edge">文本内容</text>

10.图像

  <image xlink:href="x.png" width="" height="" x="" y=""></image>

11.渐变对象

   <defs>   定义特效对象:渐变对象定义标签内
      <linearGradient id="g3" x1="" y1="" x2="" y2="">
           <stop offset="0" stop-color="red" />
           <stop offset="1" stop-color="green" />
      </ linearGradient>
   </defs>
    调用渐变对象
   <ANY fill="url(#g3)" stroke="url(#g3)"></ANY> 

12.滤镜

   <defs> 
       <filter id="f2">
           <feGaussianBlur stdDeviation="3" />  --模糊度
       </filter>
       <ANY filter="url(#f2)">
   </defs>