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

Question

[tereshock98]

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

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

Answer 1

[0xD34F]

Группируем анимируемые элементы, через set управляем свойством visibility, анимацию запускаем по окончанию действия set'а. Типа так.

Answer 2

[lagudal]

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

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

dur="5s"
begin="1s"
fill="freeze"