svg.js教程及使用手冊詳解（一）

　　　做畢設的時候，因為要使用到畫圖和自定義動畫，所以接觸到了SVG。網上關於SVG和Canvas的對比很多，具體的辨析這里就不贅言。網上關於SVG的所謂教程基本上都是SVG本身，但是卻沒有一個針對svg.js這樣的集成的SVG庫進行具體講解的教程，做這件事的，本文應該是第一篇，也是給那些需要動態的使用SVG的兄弟們一點幫助。

簡介：

SVG.js是一個輕量級的JavaScript庫，允許你輕松操作SVG和定義動畫。 
SVG（Scalable Vector Graphics，可縮放矢量圖形）是基於XML、用於描述二維矢量圖形的一種圖形格式。SVG由W3C制定，是一個開放標准。 

SVG.js中包含了大量用於定義動畫的方法，如移動、縮放、旋轉、傾斜等，具體可參閱相關演示。 

SVG.js中的一些亮點： 

• 易讀的簡潔的語法
• 非常輕量，gzip壓縮版只有5k
• 針對大小、位置、顏色等的動畫元素
• 模塊化結構，輕松擴展
• 各種實用插件
• 各種形狀類型間擁有統一的API.
• 元素可以綁定事件，包括觸摸事件
• 完全支持不透明蒙版
• 元素組
• 動態漸變
• 填充模式
• 完整的文檔記錄

使用說明：

創建一個SVG文檔

使用SVG()函數來在一個給定的html元素中創建一個SVG文檔：

var draw = SVG('canvas').size(300, 300)
var rect = draw.rect(100, 100).attr({ fill: '#f06' })

其中SVG()中的參數可以使一個元素的id或者元素本身。

以上兩句將在html文檔中產生以下代碼：

<div id="canvas">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
        <rect width="100" height="100" fill="#f06"></rect>
    </svg>
</div>

當然，要定義SVG畫布的大小，除了使用像素之外，也可以使用百分比的。如下：

var draw = SVG('canvas').size('100%', '100%')

檢測瀏覽器對SVG的支持度

在使用svg.js之前，可以先用以下的代碼來檢測瀏覽器對svg.js這個庫的支持情況：

if (SVG.supported) {

  var draw = SVG('canvas')

  var rect = draw.rect(100,100)

} else {

  alert('SVG not supported')

}

ViewBox

 <svg>的屬性可以用viewbox()方法來確定，viewbox()方法就像是一個setter函數一樣，如下所示：

draw.viewbox(0,0,297,210)

上面的一行代碼和下面的一行代碼是等價的，前兩個參數表示<svg>的位置，后兩個是其寬度和高度。

draw.viewbox({ x: 0, y: 0, width: 297, height: 210 })

如果沒有任何參數，那么viewbox就直接返回一個空的<svg>：

var box = draw.viewbox()

 viewbox() 方法可以有zoom屬性，

var box = draw.viewbox()

var zoom = box.zoom

如果viewbox中的<svg>的大小和實際的SVG畫布的大小相同，那么zoom的值就是1.

SVG 文檔

svg.js也可以在htmlDOM外工作，如下所示，是一個獨立的svg文件，就像是外部的js文件一樣。

<?xml version="1.0" encoding="utf-8" ?>

<svg id="viewport"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"version="1.1">

  <script type="text/javascript"xlink:href="svg.min.js"></script>

  <scripttype="text/javascript">

    <![CDATA[

      var draw = SVG('viewport')

      draw.rect(100,100).animate().fill('#f03').move(100,100)

    ]]>

  </script>

</svg>

今天說了svg.js的簡介，檢測支持度，創建svg，viewbox等內容，下面將持續更新svg.js的其他方法的用法，敬請關注！

原文鏈接：http://www.jinlongtalk.com/2017/02/21/svg-js1/