試圖讓svg路徑順利流動

Question

我正在使用流動的動畫svg路徑的SVG。這個SVG實現基於另一個參考SVG實現。我的問題是，參考實現中的行會永遠流暢地流動。但是，我的實現似乎在其流動過程中遇到了微妙但明顯的打嗝。這裏的原implmentation：

https://jsbin.com/hodoseb/edit?html,output

這裏是我的代碼：

https://jsbin.com/jitufih/edit?html,output

這裏是我的SVG：

https://www.dropbox.com/s/kfroff5fyidd0ay/map-path-1213.svg?dl=0

任何想法，爲什麼我的版本有打嗝在其流動畫？

Answer 1

您的虛線路徑NortheastSoutheastFlow正在覆蓋flowline CSS類'stroke-dasharray屬性。因此，不是使用10,4，而是使用12,4（在SVG中搜索stroke-dasharray="12,4"）。這使每個短劃線，它的空間有，而不是14的長度後，因此，你應該插從0到動畫到16在animateThis功能：

return d3.interpolate(0, 16); 

與該改變的動畫流暢。或者，您可以將SVG中的stroke-dasharray屬性更改爲10,4，如原始實現中那樣。您的flowline CSS類將被忽略，因爲在SVG中未引用該類。