HTML5中SVG的认识及使用

首先认识什么是SVG？

• SVG 指可伸缩矢量图形
• SVG 用于定义用于网络的基于矢量的图形
• SVG 使用 XML 格式定义图形
• SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
• SVG 是万维网联盟的标准

 SVG的优势:

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

• SVG 图像可通过文本编辑器来创建和修改
• SVG 图像可被搜索、索引、脚本化或压缩
• SVG 是可伸缩的
• SVG 图像可在任何的分辨率下被高质量地打印
• SVG 可在图像质量不下降的情况下被放大

canvas与svg有比较有哪些不同:

canvas与svg有哪些不同

Canvas	SVG
依赖分辨率	不依赖分辨率
不支持事件处理器	支持事件处理器
弱的文本渲染能力	最适合带有大型渲染区域的应用程序(比如谷歌地图)
能够以.png或.jpg格式保存结果图像	复杂度高会减慢渲染速度(任何过度使用DOM的应用都不快)
最适合图像密集型的游戏,其中的许多对象会被频繁重绘	不适合游戏应用

 SVG需要写在HTML中，SVG的代码可以直接嵌入到HTML页面中，或您可以直接链接到SVG文件。

SVG<rect>矩形

 width、height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性
fill设置填充颜色(建议使用十六进制值)
stroke定义边框的颜色
stroke-width 属性定义矩形边框的宽度

• 圆形 <circle>

•  <svg width="500" height="500">
       <!-- 圆形 circle-->
          <circle cx="300" cy="300" r="100" fill="red" fill-opcity="0.3"></circle>
  </svg>

  cx轴、cy轴、r半径、fill填充颜色
  

   椭圆 <ellipse>
   

  <svg width="500" height="500">
          <!-- 椭圆形 -->
          <ellipse cx="160" cy="200" rx="100" ry="50"></ellipse>
  </svg>

  CX属性定义的椭圆中心的x坐标
  CY属性定义的椭圆中心的y坐标
  RX属性定义的水平半径
  RY属性定义的垂直半径

• 

• 折线 <polyline>  

  <svg width="500" height="500">
       <!-- 折线  polyline  绘制闭合:polygon-->
      <polyline points="0,0,0,100,50,100" stroke="pink" fill="none" ></polyline>
  </svg>
          

  
  SVG渐变--线性

        渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。 

<linearGradient>标签必须嵌套在<defs>的内部。<defs>标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。

线性渐变可以定义为水平，垂直或角渐变：

• 当y1和y2相等，而x1和x2不同时，可创建水平渐变
• 当x1和x2相等，而y1和y2不同时，可创建垂直渐变
• 当x1和x2不同，且y1和y2不同时，可创建角形渐变

 实例1:

<JavaScript>
     var c = document.getElementById('myCanvas');
        // 创建对象
        var cxt = c.getContext('2d');
        // BEGIN开始
        cxt.beginPath();
        // 设置样式 创建渐变颜色
        var grd = cxt.createLinearGradient(0, 0, 180, 80);
        // 添加渐变颜色
        grd.addColorStop(0, "#FF0000");
        grd.addColorStop(0.5, "#00FF00");
        grd.addColorStop(1, "#A2007C");
        cxt.fillStyle = grd;
        // 绘制图形
        cxt.fillRect(0, 0, 180, 80);
</JavaScript>

 案例2:

<JavaScript>
//绘制渐变圆圈圈
        // 径向渐变xy小圆心 半径 径向渐变xy轴大圆心 半径
        var g = cxt.createLinearGradient(150, 180, 80, 150, 150, 150);
        // 给渐变对象添加渐变色
        g.addColorStop(0, 'red');
        g.addColorStop(0.2, 'orange');
        g.addColorStop(0.4, 'tomato');
        g.addColorStop(0.6, 'purple');
        g.addColorStop(0.8, 'lavender');
        g.addColorStop(1, '#C9B5D4');
        // g.addColorStop(1.2, '#635BA2');
        // g.addColorStop(1.4, '#009298');
        // 把渐变对象给到样式填充图形
        cxt.fillStyle = g;
        // 绘制图形
        cxt.arc(140,180,80,0,Math.PI * 2);
        cxt.fill();
</JavaScript>