Задать вопрос
motr
@motr
css

Как анимировать отрисовку svg линии из точки в точку?

Помогите разобраться, или ткните в хороший туториал по анимации svg.

Имеется svg . Задача:
Линия изначально не видна. При ховере на точку линия исходит из неё и отрисовывается до конца.
5b61aa8256510085608814.png

Пока получилось так codepen
  • Вопрос задан
  • 416 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
profesor08
@profesor08 Куратор тега CSS
Для этого тебе понадобится morphSVG плагин, с его помощью можешь трансформироваться свою svg как хочешь. В твоем случае, чтоб линия сначала шла до низа, потом вбок.

То есть твой d будет изменяться так:
начальное состояние: d="M272.2.3"
состояние 2: d="M272.2.3l-61 93"
состояние 3: d="M272.2.3l-61 93H0"
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Разработка бота в Telegram (POIZON)
16 апр. 2024, в 06:30
30000 руб./за проект
Исправить ошибку в пагинации 1с-битрикс
16 апр. 2024, в 05:27
500 руб./за проект
Ментор по программированию
16 апр. 2024, в 04:35
10 руб./в час
Ещё заказы