试图让 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 中没有引用。