Javascript ie中流动虚线（svg路径动画）的最佳选项？

我被指派创建一个带有虚线（路径）的图表，这些虚线（路径）流向图表中的圆圈。我首先得到了一个原型，它基于d3.js，使用以下示例：

然而，上面的url在IE中不起作用，即使是最新版本。我需要支持IE回到IE9。我的svg动画要求相当基本。只需要圆之间的流线（svg路径）

---

支持此要求的最优雅方式是什么？寻找最简单、最直接的方法，支持将svg路径流到IE9上所有主流浏览器中的圆圈。

您的示例代码使用一些高级CSS制作动画。这是使用d3编写的相同动画

更新

下面的版本是我在d3版本4中编写的，在IE9中似乎不起作用。。。以下是d3版本3的示例：

.节点{
填充：#dddddd；
笔画：灰色；
笔画宽度：4；
}
.流线{
填充：无；
笔画：黑色；
不透明度：0.5；
笔画宽度：4；
行程数组：10,4；
}
可变宽度=960，
高度=500；
var svg=d3。选择（'body'）。追加（'svg'））
.attr（'width'，width）
.attr（'高度'），高度；
var ex1=svg.append（'g'）
.attr（'transform'、'translate（50））；
ex1.append（'路径'）
.attr（'class'，'flowline'）
.attr（'d'，'M100 100 L300 100'）；
ex1.append（'路径'）
.attr（'class'，'flowline'）
.attr（'d'，'M200 300 L300 100'）；
ex1.append（'路径'）
.attr（'class'，'flowline'）
.attr（'d'，'M200 300 L300 250'）；
ex1.append（'路径'）
.attr（'class'，'flowline'）
.attr（'d'，'M300 250 L100'）；
ex1.append（'circle'）
.attr（'类'，'节点'）
.attr（'cx'，100）
.attr（'cy'，100）
.attr（'r'，20）；
ex1.append（'circle'）
.attr（'类'，'节点'）
.attr（'cx'，300）
.attr（'cy'，100）
.attr（'r'，20）；
ex1.append（'circle'）
.attr（'类'，'节点'）
.attr（'cx'，200）
.attr（'cy'，300）
.attr（'r'，20）；
ex1.append（'circle'）
.attr（'类'，'节点'）
.attr（'cx'，300）
.attr（'cy'，250）
.attr（'r'，20）；
var ex2=svg.append（'g'）
.attr（'transform'、'translate（450 50））；
ex2.append（'路径'）
.attr（'class'，'flowline'）
.attr（'d'，'M100 100 S200 300 100'）；
ex2.append（'路径'）
.attr（'class'，'flowline'）
.attr（'d'，'M200 300 S200 200'）；
ex2.append（'路径'）
.attr（'class'，'flowline'）
.attr（'d'，'M200 300 S300 350 250'）；
ex2.append（'路径'）
.attr（'class'，'flowline'）
.attr（'d'，'M300 250 L100'）；
ex2.append（'圆'）
.attr（'类'，'节点'）
.attr（'cx'，100）
.attr（'cy'，100）
.attr（'r'，20）；
ex2.append（'圆'）
.attr（'类'，'节点'）
.attr（'cx'，300）
.attr（'cy'，100）
.attr（'r'，20）；
ex2.append（'圆'）
.attr（'类'，'节点'）
.attr（'cx'，200）
.attr（'cy'，300）
.attr（'r'，20）；
ex2.append（'圆'）
.attr（'类'，'节点'）
.attr（'cx'，300）
.attr（'cy'，250）
.attr（'r'，20）；
函数animate（）{
d3.选择（本）
.transition（）
.ease（“线性”）
.持续时间（1000）
.styleTween（“笔划dashoffset”，函数（）{
返回d3，插值（0，14）；
})
.每个（“结束”，动画）；
}
d3.选择全部（“流线”）
.每个（动画）；

最简单？向IE9用户显示动画gif。寻找可重复使用的东西。此外，图表是使用不同的参数动态生成的，因此1-off动画gif对此不起作用。考虑使用js解决方案设置线条动画。看起来这可能是最简单的解决方案看起来有几个js库可以做一些像这样的高级svg动画。然而，我的场景是非常基本的-直线虚线动画以可变速度流动。因此，我认为可以使用一个简单的函数或几个js函数来完成我需要做的事情，感谢将该示例放在一起。当我在ie11和ie10中运行它时，它工作得很好，但当我在ie9中运行它时，它崩溃了。ie9是否需要额外的调整？我不需要追溯到ie9，但我需要支持ie9。d3不声称支持ie9吗？或者需要多填充/混合才能支持某些浏览器的某些场景？@user6867266，请参阅上面的更新。我没有意识到d3版本4放弃了对IE9的支持。我在d3版本3中重写了它，并在运行IE9仿真的IE11中测试了它。似乎有效。谢谢马克-你的例子很有效。谢谢你把它放在一起。我正在尝试将您的方法合并到我正在研究的特定实现中。这是svg的路径/流线：[。这是html/js:[。解决方案在ie10中工作，但在ie9中抛出了一个d3错误。如果您看到问题，请看一看并lmk好吗？@user6867266，看起来ie9不喜欢将笔划属性和

笔划dashoffset

样式混合在一起。而不是

.styleTween(“stroke dashoffset”

，使用

.attrTween（“stroke dashoffset”

…谢谢mark！你是一个救生员。你有一个带有“发送啤酒”按钮的网站吗？