Замените SVG AnimateMotion на другой динамически
Я разрабатываю приложение React, которое показывает трафик метро за прошедший период времени. На карте метро изображены маленькие поезда, каждый из которых имеет свой animateMotion так как у них разные скорости и время вылета.
Что мне нужно сделать, это остановить все animateMotion продолжается, когда пользователь запрашивает другой период времени, чтобы заменить их новыми.
Проблема: если я удаляю их, я сталкиваюсь с проблемами DOM: Uncaught DOMException: Failed to execute 'insertBefore' on 'Node',
Если я доверяю React при замене данных и обновлении компонента, предыдущие анимации либо не останавливаются (они все еще загрязняют график), либо не запускаются снова.
Вот codePen, иллюстрирующий первый случай (спасибо Раду Лункасу): https://stackblitz.com/edit/multiple-trains
Можно ли сделать это, используя SMIL, React или CSS 3? Или мне нужно взглянуть на сторонние библиотеки?
1 ответ
Обновление: похоже, что проблема вызвана тем, что анимация не перезапускается при реактивном рендеринге. Я изменил кодекс, так что теперь он вызывает
document.getElementById("ani-circle").beginElement();
перед установкой нового состояния. Это хакерский способ сделать это, я признаю, но не могу думать ни о чем другом. Я думаю, вы могли бы использовать refs вместо getElementById, чтобы сделать его менее хакерским.
взгляните на этот кодовый блок, я попытался сделать основы того, что вы описали, и реагировать, кажется, все в порядке. Возможно, вы найдете там что-то, что поможет вам, или, возможно, вы сможете повторить проблему, чтобы кто-то мог помочь.