SVG绘制图形

SVG和CANVAS

• SVG - 实际开发中，多用SVG

    不依赖分辨率
    支持事件处理器
    不适合游戏
    大型渲染区域的程序(例如，百度地图)
  

• Canvas

     依赖分辨率
     不支持事件绑定
     最适合网页游戏
     可以用图片格式保存图像
  

绘制图形

*创建 <svg></svg>
类似于canvas元素，但可以使用css样式，使用svg绘制图形，必须定义svg元素中

• 矩形
  <rect id="rect" x="100" y="100" width="200" height="150" fill="red" stroke="green" stroke-width="5"></rect>

• 圆
  <circle cx="50" cy="50" r="50" fill="red"></circle>

• 椭圆
  <ellipse cx="200" cy="50" rx="100" ry="50" fill="orange"></ellipse>

• 直线
  <line x1="0" y1="0" x2="400" y2="400" stroke="white"></line>

• 折线
  <polyline points="100,20 20,100 200,200 100,20" stroke="green" stroke-width="10" fill="pink"></polyline>

  <polygon points="100,20 20,100 200,200 100,20" stroke="green" stroke-width="10" fill="pink"></polygon>
  

注意：通过js设置序号属性是无效的，因为这些只读属性

SVG渐变

• 创建 <svg></svg>
• 在svg里追加defs元素
  <svg>
  <defs></defs>
  </svg>
• 在defs里追加linearGradient元素
  <linearGradient x1="" y1="" x2="" y2=""></linearGradient>
  注意： 这四个值都是百分比
• 在linearGradient里面追加stop元素
  <stop offset="" stop-color="" stop-opacity="">
  <stop offset="" stop-color="">
  offset: 值为百分比
  stop-color:设置渐变颜色
  stop-opacity:设置渐变颜色的透明度
• 在defs下面追加<rect>,画出图形,并将上面设置的线性渐变，添加到矩形中
  使用fill属性，值为url(#渐变元素的id值)
  <rect x="0" y="0" width="400" height="400" fill="url(#def)">
• 扇形渐变radialGradient，参考线性渐变

SVG高斯模糊效果

 <svg width="500" height="500"> 
   <defs> 

      <filter id="Gaussian_Blur"> 

            //fegaussianblur- 高斯模糊,stdDeviation - 设置模糊程度 
            <feGaussianBlur in="SourceGraphic" stdDeviation="3" /> 

      </filter>
   </defs>

   <rect x="0" y="0" width="400" height="400" filter="url(#def)">
 </svg>