Как анимировать маршрут на карте svg?

Question

[Jack]

Добрый день! Есть карта и линии маршрутов в svg. Изначально все линии маршрутов скрыты. Подскажите, пожалуйста, как реализовать анимацию прорисовки маршрутов при клике на начальную точку на карте (точка А) в промежуточную точку (точка Б) и конечную точку (точка В) с помощью svg или js? А также нужно чтоб появлялся попап в начальной точке. Благодарю за любую помощь!

Ссылка на код: https://codepen.io/moskva/pen/KjrKNK

Comments

[Eugene Chefranov]

Добавьте свой код и карту в песочницу. Как нам что-то подсказывать?

[Jack]

Eugene Chefranov, сори, вот ссылка:
https://codepen.io/moskva/pen/KjrKNK

Answer 1

[Eugene Chefranov]

Даёте уникальные id для каждого пути и кнопки, потом вешаете на пути общий класс для анимации. А дальше написал простую функцию для анимации последовательности маршрута:
dash('#path1', '#path2');

первый маршрут - id="path1" второй - id="path2"

Пример на точке слева без маршрута

Comments

[Jack]

Спасибо огромное за помощь! Очень выручил ) Теперь хоть понимаю, что к чему ))

[Eugene Chefranov]

Jack, функцию доработайте как вам удобнее, удачи!

[Jack]

Прошу прощения. А как добавить функцию, чтоб при нажатии на другую точку, маршрут предыдущей пропадал?

[Eugene Chefranov]

Jack, отредактировал пример, всем путям дайте общий класс (в примере класс path)

[Jack]

Eugene Chefranov, еще раз огромное спасибо )