Как перемещать SVG елемент к нужной точке на линии по клику?

Столкнулся с такой задачей. Сделать волнистую пунктирную линию с несколькими точками под которыми будут указаны даты и нарисовать кораблик. При клике на одну из дат, кораблик должен плавно "проплыть" по линии до этой точки и остановиться, при клике на другую дату плывет к ней и т.д.

Мои прототип на CodePen:
codepen.io/AlexFox18/pen/LxgYaP?editors=1010

Не могу сообразить как мне прописать компактный обработчик на JS используя SVG path для сохранения эффекта "плавающего" перемещения кораблика к любой из точек из любого положения.

Может кто с подобным сталкивался?
Заранее всех благодарю.
  • Вопрос задан
  • 943 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы