Как сделать несколько последовательных анимаций в svg

#css #html5 #svg #анимация #svg_animation

Я хочу получить некую анимацию только на SVG таким образом :

Буква Х трансформируется в чёрный квадрат и потом этот квадрат становится белым и
должна появится слово по центру этого квадрата как при align-items:center; justify-content:center;-
ну к примеру Lorem.

Я нарисовал в inkscape букву и взял от туда же все преобразования и получилась анимация.
Вот что вышло 








Так как моих познания в SVG smil не глубокие то прошу помощи у публики stackoverlow
помочь разобраться как сделать несколько последовательных анимаций в svg.
Анимация не должна быть циклами - я это сделал только для тренировки
Т.е после появления Lorem анимация должна остановится и всё 
Как это можно сделать ... 

Моя задумка не коммерческая а в качестве обучения 
    

Ответы

Ответ 1

Последовательность анимации в SVG реализуется с помощью атрибута begin
В отличии от CSS в SVG не нужно высчитывать тайминг. Всё это сделает за нас ядро
языка SVG.   

Последовательные анимации
В переводе на  язык людей это звучит так:  запуск второй анимации id="an2" начинается
после окончания первой анимации id="an1" --> begin="an1.end"  

Запуск третьей анимации id="an3" начнется после окончания второй анимации  id="an2"  

begin="an2.end"    

Параллельные анимации  

Выполнить вместе вторую и третью анимацию после окончания первой анимации 



   


Зацикливание анимаций 

После окончания последней анимации id="an3" выполнить первую анимацию и далее, как
в первом цикле   



     


Ниже полный код всего приложения   



.container {
width:35%;
height:35%;
}

 



Ответ 2

Как сделать анимацию обводки букв

Будет использована последовательная анимация прорисовки контуров букв. 

Для анимации прорисовки будет применена техника изменения атрибута stroke-dashoffset
от максимального значения, до нуля. Соответственно контур буквы будет прорисовываться
от нуля до полного появления линии. 

#1 Получение патчей каждой буквы  

Есть очень простой способ сделать это


Открываем Inkscape 
Выбираем из меню текст, устанавливаем нужный размер и пишем слово LOREM   
В верхнем меню редактора выбираем - контур/ оконтурить объект
Shpft+Ctrl+C   


   


Сохраняем файл
Теперь у каждой буквы есть свой персональный патч   









Присваиваем каждому патчу свой ID Например патчу буквы - L присваиваем:
  id="L" и в будущем присвоим анимации этой буквы id="an_L" 


Далее для анимации контуров букв необходимо точно узнать их длину  


Для этого используем функцию JS - TotalLength() 

Ниже пример определения длины контура для буквы M 



 function TotalLength(){
          var path = document.querySelector('#check');
        var len = Math.round(path.getTotalLength() );
        alert("Длина пути - " + len);
        };
 
   
 
   


  

Пишем код анимации

Для буквы L максимальная длина линии - 458px поэтому анимируемый параметр stroke-dashoffset
будет изменяться от максимума до нуля values="458;0" 
Более подробно об этой технике здесь  









Повторяем этот фрагмент кода для остальных букв слова LOREM
Понятно, что для каждой буквы берем свой патч и подставляем
соответствующие длины
цепочка последовательных анимаций выглядит как команды: запуск анимации буквы "O"
после окончания анимации буквы "L" begin="an_L.end"   
После прорисовки букв запускаем анимацию закраски букв

   
Ниже полный код анимации   




.container {
width:50%;
height:50%;
}

 



 

Объединяем два примера анимации

Трансформацию фигур и прорисовку контуров букв  

Смотреть интересней в полноформатном окне. Для просмотра нажмите кнопку "Start"



.container {
width:50%;
height:50%;
}