https://www.w3schools.com/graphics/svg_intro.asp
http://www.oxxostudio.tw/articles/201410/svg-tutorial.html
https://www.astralweb.com.tw/vivus-bringing-your-svgs-to-life-i/
本次重點是利用 SVG 的stroke-dasharray和stroke-dashoffset屬性與 CSS3 animation 結合做出類似手寫風格的動畫。
1.產出 SVG 向量
最快速的方法是利用 Illustrator 或 Sketch 繪製圖形後轉存 .svg，再使用編輯器節錄其中 <path> 路徑標籤。
2.了解Stroke-dasharray 與 Stroke-dashoffset
Stroke-dasharray：線段的「虛線間距」，可為單一值或可以是一陣列
Stroke-dashoffset： 線段的「偏移量」，要實現動畫則要動態改變這個偏移值
3.利用@keyframes實現動態
這樣就可以簡單自己完成基本 SVG 動畫，若再搭配其他屬性則會有更多有趣的呈現 (詳細可參考 https://www.w3schools.com/graphics/svg_intro.asp )
如果套用 vivus.js ，只要加上一些參數設定，可迅速製作出多層次又具有質感的 SVG 動畫。
