试图让svg路径畅通无阻

Question

我正在使用流动的svg路径处理SVG。此SVG实现基于另一个参考SVG实现。我的问题是参考实现上的线条永远流畅。然而，我的实施似乎在其流动过程中遇到微妙但明显的打嗝。这是最初的实施方案：

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"）。这导致每一行破折号和后面的空格的长度为 16 ，而不是14.因此，您应该在animateThis函数中插值为0到16的动画：

return d3.interpolate(0, 16);

通过这种改变，动画很流畅。或者，您可以将SVG中的stroke-dasharray属性更改为10,4，与原始实现中一样。您的flowline CSS类被忽略，SVG中没有引用。