动态替换另一个SVG AnimateMotion

Posted 2021-03-29

我正在开发一个React应用程序，它会在一段时间内显示地铁交通。它显示了在地铁地图上移动的小火车，每列火车都有自己的animateMotion，因为它们具有不同的速度和起飞时间。

我需要做的是，当用户要求不同的时间段时，停止所有的animateMotion，用新的替换它们。

问题：如果我删除它们，我会遇到DOM问题：Uncaught DOMException: Failed to execute 'insertBefore' on 'Node'。

如果我相信React更换数据并更新组件，之前的动画要么不停止（它们仍然污染图形），要么不再启动。

这是一个说明前一种情况的代码图（感谢Radu Luncasu）：https://stackblitz.com/edit/multiple-trains

使用SMIL，React还是CSS 3可以做到这一点吗？或者我需要看看第三方图书馆？

答案

更新：看起来问题是由动画未在反应渲染上重新启动引起的。我已经修改了codepen所以它现在调用了

document.getElementById("ani-circle").beginElement();

在设置新状态之前。我承认，这是一种愚蠢的做法，但却无法想到其他任何事情。我想你可以使用ref而不是getElementById来减少hacky。

看看这个codepen，我试着做你所描述的基础知识并做出反应似乎做得很好。也许你会在那里找到一些可以帮助你的东西，或者你可以复制这个问题，这样有人可以提供帮助。

https://stackblitz.com/edit/react-cbaxbq