@tereshock98

Как сделать изначально невидимый до анимации SVG?

Есть SVG Анимация.
Я выставил задержку анимации
begin="1s"

Но проблема в том, что svg картинка появляется сначала полностью готовой, а потом уже через секунду начинает проигрываться анимация. Код прилагаю

  • Вопрос задан
  • 127 просмотров
Решения вопроса 2
0xD34F
@0xD34F
Группируем анимируемые элементы, через set управляем свойством visibility, анимацию запускаем по окончанию действия set'а. Типа так.
Ответ написан
@lagudal
Но проблема в том, что svg картинка появляется сначала полностью готовой, а потом уже через секунду начинает проигрываться анимация

ну так вы же сами выставили на все пути изначально
stroke-dashoffset="0"
Т.е. вы показываете сначала все это дело без промежутков, и через 1 сек начинаете анимировать из 540 до 0 к примеру.
Установите изначально свои максимальные значения stroke-dashoffset и все заработает.
Единственное, в таком виде как сейчас, анимация завершится возвращением к тем же значениям. Для того чтобы оставить после анимации линии прорисованными, добавьте/измените значение fill (в animate) с remove, на freeze, к примеру
dur="5s"
begin="1s"
fill="freeze"
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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