lebedevweb
@lebedevweb

Как реализовать svg анимацию с заменой path?

Здравствуйте, не получается сделать плавную замену path внутри svg.

1. Хотел реализовать через @keyframes, но анимация работает только в crome и только в песочнице: https://jsfiddle.net/7wvuj4sp/
2. Второе решение было сделать через animate со сменой координат фигуры через values. Работает в crome, opera и firefox, но отсутствует плавный переход между отображениями координат.
https://jsfiddle.net/aw6z4mtg/17/

Подскажите что делаю не так и как можно исправить код?

UPD: исправлена вторая ссылка
  • Вопрос задан
  • 95 просмотров
Решения вопроса 1
lebedevweb
@lebedevweb Автор вопроса
Нашел в чем причина. Переработал 2й вариант:

2. Второе решение было сделать через animate со сменой координат фигуры через values. Работает в crome, opera и firefox, но отсутствует плавный переход между отображениями координат.
https://jsfiddle.net/aw6z4mtg/17/


Ошибка состояла в том, что координаты в values имели разный набор точек (фактически подставлялись разные объекты), поэтому никакого перехода не было.
В новой версии объект содержит одинаковый набор точек с измененными координатами.

https://jsfiddle.net/
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
SilenceOfWinter
@SilenceOfWinter
та еще зажигалка...
Комментировать
Ваш ответ на вопрос

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

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