我正在开发一个具有流动动画 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
知道为什么我的版本的流程动画出现问题吗?
最佳答案
您的虚线路径 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 中未引用该类。
关于javascript - 试图让 svg 路径顺利流动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39797893/