Jack_Sparrow
@Jack_Sparrow
Junior HTML/CSS

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

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

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

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

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

Пример на точке слева без маршрута
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@moreleaksILoveMS
Всё это делается легко при помощи onhover'a > transform: transition(X, Y);
Ответ написан
Ваш ответ на вопрос

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

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