相信大家都見到過這樣神奇的技術：一副線條構成的畫能自動畫出自己。非常的酷。Jake Archibald是這種SVG技術的首創者，并且寫了一篇非常好的文章來描述它是如何實現的。Brian Suda也在24 Ways網站上討論過它。 Polygon使用它在一篇設計方面的文章里創造出了非常神奇的效果。Codrops也做出了一些非常漂亮的例子。
其實我沒有什么好增補的，只是想把這種技術說的更明白些，所以，在這里我要用我的方式把這種技術再講解一遍。
1. 你有一個SVG圖形
2. 這個圖形必須要有一個線條(stroke)屬性
3. 線條可以是虛線
我們可以用Illustrator制作，也可以用編程實現。我們用CSS來設置這些路徑的樣式(假定我們這里是inline SVG，或通過一個<object>)，把它們變成虛線形式。
<svg ...> <path class="path" stroke="#000000" ... > </svg> .path {stroke-dasharray: 20; }這是讓虛線里的每個小線段長度為20px。
4. 可以讓虛線小段的長度變得更長….
.path {stroke-dasharray: 100; }
5. 我們還可以給我們的線條設置”offset”偏移量，這樣會導致虛線里的小線段的位置發生移動。
當我們動態設置圖形中線條的“offset”值時，可以看到這個效果：
可以這樣簡單的實現：
.path {stroke-dasharray: 100; animation: dash 5s linear; } @keyframes dash { to { stroke-dashoffset: 1000; } }6. 想象，當虛線的小線條足夠長，超過圖形的整個線條長度時
沒有什么變化，整個圖像看起來完全不是虛線。你只需要將stroke-dasharray屬性設置的足夠長，超過整個線條的長度。
7. 現在給線條設置偏移量，讓它不再覆蓋整個圖形。
這樣你就看不見圖形了。
8. 現在動態的慢慢將線條的偏移量設置回歸到0
如果通過CSS，你需要將animation屬性設置成forwards，這樣整個動畫就會停止在它的最終狀態。
.path {stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; } @keyframes dash { to { stroke-dashoffset: 0; } }Tada!
實例演示
?
為什么要用JavaScript?
大部分你看到的SVG線條動畫都使用了JavaScript。這是因為在現實情況中你很難知道線條有多長。我們這里設置的是1000，是因為它碰巧是1000。
用JavaScript獲取長度值的寫法是這樣的：
var path = document.querySelector('.path'); var length = path.getTotalLength();然后你就可以隨便使用這個值了。文本頂部鏈接的那些文章講的都比本文透徹，你最好還是參考一下那些文章。我只想簡單的講一下這種技術方法，希望它能給你一些啟示。
(英文：How SVG Line Animation Works.)
的使用)
