Javascript 尝试使svg路径平滑流动

我正在开发一个具有流动动画SVG路径的SVG。此SVG实现基于另一个参考SVG实现。我的问题是，参考实现上的行永远都是平滑的。然而，我的实现在其流程中似乎遇到了微妙但明显的问题。以下是最初的实施方案：

这是我的密码：

以下是我的SVG：

---

知道为什么我的版本在其流动画中出现打嗝吗？

您的虚线路径

东北-东南流

正在覆盖

流线

CSS类“

笔划数组

属性。因此，它不使用

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中未引用该类