анимировать элемент DIV вдоль пути SVG, нажав кнопку

Question

У меня есть путь SVG:

<path d="M124 442 L124 442 L166 393 L162 332 L200 251 L179 76" stroke="red" stroke-width="2" fill="none" fill-opacity="0.1"></path> 

И я хочу, чтобы элемент DIV двигаться по этому пути, когда я нажимаю «рядом кнопку».

Это как:

*startpoint (beginning of the path) + DIV element 
*click next-button* + DIV element moves to station 1 
*station 1 
*click next-button* + DIV element moves to station 2 
*station 2 
*click next-button* + DIV element moves to the end of the path 
endpoint (end of the path) 

Кто-нибудь есть идея, как я могу сделать это?

Answer 1

Если вы действительно хотите анимировать элемент HTML с помощью SVG, то вы можете посмотреть animateMotion и foreignObject.

Однако это может быть не идеальное и наиболее широко распространенное решение в вашей ситуации. Почему бы не использовать «традиционный» способ JavaScript, анимируя атрибут стиля? Пока ваш путь ограничивается простыми сегментами прямой линии, это не должно быть слишком сложно.

Answer 2

Найдено очень полезные инструменты. Его называемый аниматор пути.

Это может быть ваш друг.

https://github.com/yairEO/pathAnimator