javascript - 试图让 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 中的 lines-dasharray 属性更改为 10,4，如原始实现中所示。您的 flowline CSS 类将被忽略，因为 SVG 中未引用该类。