SVG.js 使用紀錄

SVG.js 配合ai在操控動畫上很方便，可以做到比stroke-dasharray /stroke-dashoffset更多的效果，使用上也不難。

前置：

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.13/svg.min.js"></script>

然後svg就靠ai出圖，ai出來的svg示意如下

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve">
<rect x="45.9" y="44.6" fill="#FFFFFF" stroke="#231815" stroke-miterlimit="10" width="59.6" height="59.6"/>
<circle fill="#FFFFFF" stroke="#231815" stroke-miterlimit="10" cx="164.1" cy="66.7" r="30.3"/>
<ellipse fill="#FFFFFF" stroke="#231815" stroke-miterlimit="10" cx="285.3" cy="73.4" rx="72.3" ry="17.4"/>
<polygon fill="#FFFFFF" stroke="#231815" stroke-miterlimit="10" points="388.6,94.3 366.5,56 388.6,17.7 432.8,17.7 454.9,56 
 432.8,94.3 "/>
<line fill="none" stroke="#231815" stroke-miterlimit="10" x1="39.7" y1="145.5" x2="205.8" y2="145.5"/>
<path fill="none" stroke="#231815" stroke-miterlimit="10" d="M263.5,134.1c6.8,18.9,24.8,39.7,57,32.2
 c32.2-7.5,26.4-30.3,56.4-25.4c30,4.9,38.8,42,64.8,25.4s29.6-23.8,52.4-11.7"/>
</svg>

各種形狀會有不同的標籤，後面也會有各自可控制的屬性跟座標，以svg標籤來說，裡面的viewBox是這張圖案的範圍，也是svg.js上需要的，不過圖案的大小是可以透過css來改的，反正svg放大不會失真。

共通的屬性：
fill 是填色，
stroke 是框線顏色，
stroke-width 是框線粗細，
stroke-linecap 是線頭，圓或方，
stroke-linejoin 是轉折，圓或方，
stroke-miterlimit 是轉折限度，

標籤：
rect，矩形，x、y是左上角的座標，後面接長寬，
circle，圓，cx、cy是中心點座標，r是radius，
ellipse，橢圓，cx、cy是中心點座標，rx、ry是xy軸的radius，
polygon，多邊形，座標是用points，
line，線段，x1y1是開頭座標，x2y2是結尾座標，
path，如果是繪圖動畫，這是最好用的，座標使用d，這邊的數字跟上面不同，有M、c等的數字，這是錨點的曲線，如果要使用這類的座標就要加一支plugin幫忙：svg.pathmorphing.js，下載後掛就好了。


使用：
老樣子先在html中增加id來使用，在svg.js中畫每種不同的圖都要用對應的標籤，如下：

// 畫方形
var draw = SVG('id').viewbox(0, 0, 650, 650);
// 0 0 畫布開始座標 650 650畫布大小(ai幫搞定)
var rect = draw.rect(100, 100); // 寬 高

// 畫圓形 attr每項都可以加
var draw = SVG('id').viewbox(0, 0, 650, 650);
var circle = draw.circle(100).attr({ // radius
 fill: '#ffffff', // 填色
 cx: '100', // 座標
 cy: '100'
}); 

// 畫橢圓形
var draw = SVG('id').viewbox(0, 0, 650, 650);
var ellipse = draw.ellipse(rx, ry).attr({
 cx: '100', // 座標
 cy: '100'
});

// 畫多角形
var draw = SVG('id').viewbox(0, 0, 650, 650);
var polygon = draw.polygon('各個角的座標 用空格分開');

// 畫線段
var draw = SVG('id').viewbox(0, 0, 650, 650);
var polyline = draw.polyline('x1 y1 x2 y2 ...還可以更多');

// 畫路徑
var draw = SVG('id').viewbox(0, 0, 650, 650);
var path_body = draw.path(
 `ai path裡面的所有數據` // 用es6的``包頭尾可，但是ie會哭，還是用''+吧
).attr({ 
 fill: 'none', // 無填色
 stroke: '#000000', //線段顏色
 'stroke-width': '2', // 線段粗細
 'stroke-linecap': 'round', // 圓頭
 'stroke-linejoin': 'round' // 圓轉角
});

動畫的方法是使用，.animate().plot()，告訴svg.js接下來要走去哪，示意如下：

var draw = SVG('id').viewbox(0, 0, 650, 650);
var path_body = draw.path(`path裡的數據`);
  path.animate(毫秒).plot(`path裡的數據`);

另外path的動畫要注意的是，有多少錨點可別在下一張多出來，會爆的，如果前一張是15個點，那下一張就是用這15點去移動。矩形的變化就是靠座標去發揮想像力了 : )

如果要讓動畫loop，可用.loop()接在後頭，使用.loop(5)就會播放五次，而且五次都會從頭開始播放，如果要讓動畫播到結束再倒退放可以用.loop(5, true)，而無限播放就是.loop(true, true)囉。

以上就是基本的操作。搭配ai才能事半功倍阿。

另外，如果將動畫效果包在js的function中，然後給予指令，比如說hover或是click就會執行一次，也是可以這樣控制的。