Задать вопрос
Jack_Sparrow
@Jack_Sparrow
Junior HTML/CSS
javascript

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

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

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

5d2338178ad83153178939.jpeg
  • Вопрос задан
  • 552 просмотра
2 комментария
Подписаться 3 Средний 2 комментария
Решения вопроса 1
Chefranov
@Chefranov
Новичок
Даёте уникальные id для каждого пути и кнопки, потом вешаете на пути общий класс для анимации. А дальше написал простую функцию для анимации последовательности маршрута:
dash('#path1', '#path2');

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

Пример на точке слева без маршрута
Ответ написан
5 комментариев
5 комментариев
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
Мэтч
от 80 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Собрать сайт на Vue / Laravel
19 апр. 2024, в 11:14
65000 руб./за проект
Отрисовка дизайна главной и внутренней
19 апр. 2024, в 11:08
5000 руб./за проект
Работы по АСУТП
19 апр. 2024, в 10:59
150000 руб./за проект
Ещё заказы