试图让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中未引用该类。