Reactjs 动态地将SVG动画替换为另一个动画

我正在开发一个React应用程序，显示给定时间段内的地铁交通情况。它在地铁地图上显示了移动的小火车，每列火车都有自己的

和
，因为它们有不同的速度和出发时间

我需要做的是，当用户请求一个不同的时间段时，停止所有正在进行的
animateMotion
，用新的时间段替换它们

问题：如果删除它们，我会遇到DOM问题：
未捕获的DomeException:未能在“节点”上执行“insertBefore”

如果我相信在替换数据和更新组件时会做出反应，那么以前的动画要么不会停止（它们仍然会污染图形），要么不会再次启动

以下是一个代码笔，用于说明前一个案例（感谢Radu Luncaus）：

使用SMIL、React或CSS 3是否可以做到这一点？或者我需要看一看第三方库吗？
更新：问题似乎是由于在react渲染时未重新启动动画造成的。我修改了代码笔，所以现在它调用

document.getElementById（“ani圈”）.beginElement（）

在设置新状态之前。我承认，这是一种令人讨厌的方式，但我想不出还有什么别的办法。我想您可以使用refs而不是getElementById来减少黑客攻击

看看这个代码笔，我试着做了你描述的基本内容，反应似乎很好。也许你会在那里找到一些帮助你的东西，或者你可以复制这个问题，以便有人可以帮助你

看看这个代码笔，我试着做了你描述的基本内容，反应似乎很好。也许你会在那里找到一些对你有帮助的东西。在设置新状态时，还要对动画对象调用.beginElement（）。看看我更新的答案和密码笔。我拿了你的密码笔，把它和我的问题分开了一点：情感不是无限重复的。在计数中，我无法在完成后更改值。无法打开叉子，我可以在几个小时前打开，但不再是。谢谢，这是一个改进。但是我仍然有一个关于多个火车的问题，正如你在这里看到的，啊哈，你可以像这样调用beginelementtat（delay）：
restartAllTrainsWithDelay=（delay）=>{const elems=document.getElementsByTagName（“animateMotion”）；例如（让i=0；igreat-我的用例的一个问题：我不希望动画启动，除非我激活它，我如何实现这一点？