相信大家都見到過這樣神奇的技術：一副線條構成的畫能自動畫出自己。非常的酷。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 .)

?

原文： http://www.webhek.com/how-svg-line-animation-works

本文： SVG技術入門：線條動畫實現原理