在上一篇文章中，我們初步實作了一些利用基本圖形就能完成的線條動畫：
<a href="http://www.cnblogs.com/coco1s/p/6225973.html">【Web動畫】SVG 線條動畫入門</a>
當然，事物都是朝着熵增焓減的方向發展的，複雜線條也肯定比有序線條要多。
很多時候，我們無法人工去畫出一些十分複雜動畫的線條，這個時候，就要借助前端好幫手 PS 和 AI，而本文就是介紹如何導出複雜的 SVG 路徑。：
好了，假定我們現在要制作下圖 GIF 這樣的一個 loading 圖：
上面這個 SVG 線條動畫的路徑 <code>path</code> ，如果靠自己手工一個點一個點定位調試畫出來的話，嘿嘿嘿你去試試。
估計靠手工能畫出來，也沒了大半條命。好，輪到工具上場，看看我們的原圖在 PS 下長什麼樣子（支援透明通道的 PNG、GIF 為佳）：
好，選中選框工具，按下 CTRL 選中圖層， 再選擇建立工作路徑：
這個時候會彈出一個設定容差大小的選擇，可以用不同大小的容差多試幾次，直到得到一個自己滿意的路徑。
容差是什麼？可以了解為一種精确度，在選取顔色時所設定的選取範圍，容差越大，選取的範圍也越大，其數值是在0-255之間。
好，這個時候，路徑算是建立完成了，可以把圖層的透明度設定為 0 ，就能清晰的看到路徑長啥樣：
好，到了 PS 中的最後一步，點選檔案選項，導出路徑到 illustrator ，看圖，照着操作就好：
打開 AI ，打開剛剛用 PS 導出的 <code>*.ai</code> 檔案。
沒有 AI ？身為前端居然連 AI 也沒裝(￣△￣；) 額，其實我也是因為 SVG 才上手的，趕緊下一個吧，我的版本是 Adobe illustrator CC 2014。
可能你看到的是一片空白，别慌，使用選擇工具選一個矩形，就能選中路徑啦。
如果你是 PS 鋼筆工具小能手，還可以繼續對路徑進行修改，直到自己滿意為止。
OK，接下來就是調整畫布大小，最好是路徑左上角和畫布左上角對齊，然後選中存儲為 SVG 檔案。
好，其實 AI 也沒做什麼，路徑是使用 PS 生成的，為什麼不直接用 PS 生成 <code>*.svg</code> 檔案呢？因為我用的版本 PS 還沒支援直接存儲為 SVG 格式。然後其實也可以直接在 AI 上繪制路徑，這個就看設計師或者你對哪個工具更熟悉了。
OK，最後把剛剛儲存的 <code>*.svg</code> 路徑的檔案用浏覽器打開，一片空白是正常的，右鍵檢視網頁源代碼：
大功告成，這裡面， 路徑就是我們需要的路徑了！
好，把我們要的 <code><path></code> 整個拿出來，運用上一篇文章的線條動畫知識，給它賦予簡單的動畫效果就好：
還有一個問題，線條動畫需要知道整個 <code>path</code> 路徑的長度，簡單的線條我們還可以利用加減法算出整個圖形的長度。那麼複雜路徑的長度怎麼計算？
利用一段簡單的 js 可以完成：
1
2
3
<code><</code><code>svg</code><code>></code>
<code> </code><code><</code><code>path</code> <code>d="..."></code>
<code></</code><code>svg</code><code>></code>
4
<code>var obj = document.querySelector(</code><code>"path"</code><code>);</code>
<code>var length = obj.getTotalLength();</code>
<code>console.log(length); // </code><code>377.0433</code>
好了，有了複雜圖形的路徑，我們就可以制作出很多酷炫 SVG 動畫效果了。撒花。可以多上 codePen 上搜尋 SVG，學習下大神們的一些 SVG 動畫。
算是正式踏入 SVG 的坑，接下來還會有一系列 SVG 的文章，将會更深入的讨論 SVG。
到此本文結束，如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。
本文轉自ChokCoco部落格園部落格，原文連結：http://www.cnblogs.com/coco1s/p/6230165.html