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

Question

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

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

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

<svg viewBox="-200 25 329 223" xmlns="http://www.w3.org/2000/svg">
  <g transform="scale(1.1 .94)" aria-label="x">
   <path style="fill:#000000;">
       <animate id="steps1" attributeName="d" values="M 58.755625,235.87639 H 17.601031 l -55.046439,-74.49503 -55.393736,74.49503 h -38.028926 l 75.710558,-96.72198 -75.015968,-97.24292 h 41.154594 l 54.699143,73.27949 54.872791,-73.27949 h 38.202577 l -76.231505,95.50644 z;M 58.755625,235.87639 H 17.601031 l -59.300239,2.0799 -51.139936,-2.0799 h -38.028926 l 1.97802,-91.07962 -1.28343,-102.88528 h 41.154594 l 54.699143,1.540872 54.872791,-1.540872 h 38.202577 l -1.789997,86.63987 z;" begin="0s;steps2.end" dur="3s" />
       <animate id="steps2" attributeName="d" values="M 58.755625,235.87639 H 17.601031 l -59.300239,2.0799 -51.139936,-2.0799 h -38.028926 l 1.97802,-91.07962 -1.28343,-102.88528 h 41.154594 l 54.699143,1.540872 54.872791,-1.540872 h 38.202577 l -1.789997,86.63987 z;M 58.755625,235.87639 H 17.601031 l -55.046439,-74.49503 -55.393736,74.49503 h -38.028926 l 75.710558,-96.72198 -75.015968,-97.24292 h 41.154594 l 54.699143,73.27949 54.872791,-73.27949 h 38.202577 l -76.231505,95.50644 z;" begin="steps1.end" dur="3s" />
   </path>
  </g>
</svg>

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

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

Можно подробней написать, как должно появиться слово LOREM 1. анимация opacity или 2.прорисовка контуров букв слова 3. Или слово должно приехать в центр? — Alexandr_TT, Dec 13 '18 at 07:06
ну я не русский и мне скидка ... 1) буква Х 2) трансформация в квадрат 3) fill:white 4) lorem точно в центре ... вот так вроде - мне бв просто увидеть последовательность — Резидент Казахстана, Dec 13 '18 at 07:09
я из вопроса в топике уже понял, что нужна техника реализации последовательных анимаций. Меня интерескет последний этап - этап анимации Слова LOREM 1. анимация opacity или 2.прорисовка контуров букв слова 3. Или слово должно приехать в центр? — Alexandr_TT, Dec 13 '18 at 07:12
ну можно opacity это не критично ... сама последовательность нужна ... — Резидент Казахстана, Dec 13 '18 at 07:13
хотя можно и прорисовкой контуров ... но главное что бы состояние сохранилось ... т.е лорем появился и всё ..стоп кадр ...хотя могу подождать 2 дня и назначить вознагрождение — Резидент Казахстана, Dec 13 '18 at 07:15

Alexandr_TT · Accepted Answer · 2018-12-13T12:28:42.913

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

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

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

begin="an2.end"

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

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

<animate id="an1" begin="0s" ../>
<animate id="an2" begin="an1.end" ../>
<animate id="an3" begin="an1.end" ../>

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

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

<animate id="an1" begin="0s;an3.end" ../>
<animate id="an2" begin="an1.end" ../>
<animate id="an3" begin="an2.end" ../>

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

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

<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 850 800" preserveAspectRatio="xMinYMin meet" style="border:1px solid gray;" >  
  <path fill="none" stroke="black" stroke-width="4" stroke-dashoffset="0" stroke-dasharray="3986" d="M20.4 58.1H198.9L427.9 323 658 58.1H819.8L499.8 404.5 819.8 760.4H646L415.9 492 179.8 760.4H20.4L340.4 410.5Z" class="s0">
<animate id="an_sd" 
 attributeName="stroke-dashoffset"
  values="3986;0"
  dur="4s"/>
<animate id="an_fill" 
 attributeName="fill"
 values="white;black" 
 dur="2s" 
 begin="an_sd.end"
 fill="freeze" />
  <animate id="an_rec" 
   attributeName="d" values="M20.4 58.1H198.9L427.9 323 658 58.1H819.8L499.8 404.5 819.8 760.4H646L415.9 492 179.8 760.4H20.4L340.4 410.5Z;M20.4 58.1H198.9L427.9 59.3 658 58.1H819.8L822.2 406.9 819.8 760.4H646L427.9 760.5 179.8 760.4H20.4l0-353.5z"
   dur="4s"
   begin="an_fill.end"
   fill="freeze" />
</path>
<text x="100" y="450" fill="crimson";font-family="sans-serif" font-size="192" letter-spacing="0";line-height="1.3"word-spacing="0" fill-opacity="0" >LOREM 
   <animate id="an_opacity"
    attributeName="fill-opacity"
 values="0;0.25;0.5;0.75;1"
 dur="7s"
 begin="an_rec.end-0.5s"
 fill="freeze" />
</text> 
</svg> 
</div>

@Ubuntu User Готово, смотри – Alexandr_TT Dec 13 '18 at 10:31 — Alexandr_TT, Dec 13 '18 at 10:31

Alexandr_TT · Answer 2 · 2018-12-13T15:11:42.157

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

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

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

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

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

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

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

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="850" height="800" viewBox="0 0 850 800" preserveAspectRatio="xMinYMin meet" border="1">
<path d="M20.4 58.1H198.9L427.9 59.3 658 58.1H819.8L822.2 406.9 819.8 760.4H646L427.9 760.5 179.8 760.4H20.4l0-353.5z" class="s0" />
<g aria-label="LOREM" style="fill:none; stroke:white; stroke-width:2; font-family:sans-serif;font-size:192;letter-spacing:0;line-height:1.3;word-spacing:0">
<path id="L" d="M175.4 406.9H87.1V267.3h18.6v123.1h69.8zM296.1 283.3"/>
<path id="O" d="m296.1 283.3q8.5 9.4 13 23 4.6 13.6 4.6 30.8 0 17.3-4.7 30.9-4.6 13.6-12.9 22.7-8.6 9.5-20.4 14.3-11.7 4.8-26.8 4.8-14.7 0-26.8-4.9-12-4.9-20.4-14.2-8.4-9.3-13-22.8-4.5-13.5-4.5-30.8 0-17.1 4.5-30.6 4.5-13.6 13.1-23.2 8.3-9.2 20.4-14.1 12.3-4.9 26.7-4.9 15 0 26.9 5 12 4.9 20.3 14zm-1.7 53.8q0-27.2-12.2-41.9-12.2-14.8-33.3-14.8-21.3 0-33.5 14.8-12.1 14.7-12.1 41.9 0 27.5 12.4 42.1 12.4 14.5 33.2 14.5 20.8 0 33.1-14.5 12.4-14.6 12.4-42.1z"/>
<path id="R" d="m458.7 406.9h-24.1l-46.7-55.5h-26.2v55.5h-18.6V267.3h39.1q12.7 0 21.1 1.7 8.4 1.6 15.2 5.8 7.6 4.8 11.8 12.1 4.3 7.2 4.3 18.4 0 15.1-7.6 25.3-7.6 10.1-20.9 15.3zm-43.4-100.3q0-6-2.2-10.6-2.1-4.7-6.9-7.9-4-2.7-9.6-3.7-5.5-1.1-13-1.1h-21.8v52.7h18.8q8.8 0 15.4-1.5 6.6-1.6 11.2-5.8 4.2-3.9 6.2-9 2.1-5.2 2.1-13z"/>
<path id="E" d="M568.7 406.9H476.7V267.3h92v16.5h-73.4v38.3h73.4v16.5h-73.4v51.8h73.4z"/>
<path id="M" d="m722.5 406.9h-18.6V286.6l-38.8 81.8h-11.1L615.5 286.6V406.9H598.2V267.3h25.3l37.2 77.7 36-77.7h25.8z"/>
</g>
</svg>

Присваиваем каждому патчу свой 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);
        };

 <input  type="button" value="Total"  onclick="TotalLength()"/>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
     width="850" height="800" viewBox="0 0 850 800" >
     &lt;path id="check" fill= "none" stroke ="grey" stroke-width ="1" 


d="m722.5 406.9h-18.6V286.6l-38.8 81.8h-11.1L615.5 286.6V406.9H598.2V267.3h25.3l37.2 77.7 36-77.7h25.8z" />
</svg>

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

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

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="850" height="800" viewBox="0 0 850 800" preserveAspectRatio="xMinYMin meet" border="1">
<path d="M20.4 58.1H198.9L427.9 59.3 658 58.1H819.8L822.2 406.9 819.8 760.4H646L427.9 760.5 179.8 760.4H20.4l0-353.5z" class="s0" />
<g aria-label="LOREM" style="fill:none; stroke:white; stroke-width:2; font-family:sans-serif;font-size:192;letter-spacing:0;line-height:1.3;word-spacing:0">
<path id="L" stroke-dashoffset="458" stroke-dasharray="458" d="M175.4 406.9H87.1V267.3h18.6v123.1h69.8zM296.1 283.3">
  <animate id="an_L" 
   attributeName="stroke-dashoffset" 
   values="458;0"
   dur="0.8s"
   begin="0s;"
   fill="freeze"/>
 </path>
</svg>

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

<animate attributeName="fill" xlink:href="#letter" begin="an_M.end" dur="3s" values="black;red" fill="freeze"/>
Ниже полный код анимации

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

<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1"  viewBox="0 0 850 800" preserveAspectRatio="xMinYMin meet" border="1">
<path d="M20.4 58.1H198.9L427.9 59.3 658 58.1H819.8L822.2 406.9 819.8 760.4H646L427.9 760.5 179.8 760.4H20.4l0-353.5z" class="s0" />
<g aria-label="LOREM" style="fill:none; stroke:white; stroke-width:2; font-family:sans-serif;font-size:192;letter-spacing:0;line-height:1.3;word-spacing:0">
 <g id="letter" stroke-width="3">
<path id="L" stroke-dashoffset="458" stroke-dasharray="458" d="M175.4 406.9H87.1V267.3h18.6v123.1h69.8zM296.1 283.3">
  <animate id="an_L" 
   attributeName="stroke-dashoffset" 
   values="458;0"
   dur="0.8s"
   begin="0s;"
   fill="freeze"/>
 </path>
<path id="O" stroke-dashoffset="770" stroke-dasharray="770" d="m296.1 283.3q8.5 9.4 13 23 4.6 13.6 4.6 30.8 0 17.3-4.7 30.9-4.6 13.6-12.9 22.7-8.6 9.5-20.4 14.3-11.7 4.8-26.8 4.8-14.7 0-26.8-4.9-12-4.9-20.4-14.2-8.4-9.3-13-22.8-4.5-13.5-4.5-30.8 0-17.1 4.5-30.6 4.5-13.6 13.1-23.2 8.3-9.2 20.4-14.1 12.3-4.9 26.7-4.9 15 0 26.9 5 12 4.9 20.3 14zm-1.7 53.8q0-27.2-12.2-41.9-12.2-14.8-33.3-14.8-21.3 0-33.5 14.8-12.1 14.7-12.1 41.9 0 27.5 12.4 42.1 12.4 14.5 33.2 14.5 20.8 0 33.1-14.5 12.4-14.6 12.4-42.1z">
   <animate id="an_O" 
   attributeName="stroke-dashoffset" 
   values="770;0"
   dur="1s"
   begin="an_L.end"
   fill="freeze"/>
 </path>
<path id="R" stroke-dashoffset="774" stroke-dasharray="774" d="m458.7 406.9h-24.1l-46.7-55.5h-26.2v55.5h-18.6V267.3h39.1q12.7 0 21.1 1.7 8.4 1.6 15.2 5.8 7.6 4.8 11.8 12.1 4.3 7.2 4.3 18.4 0 15.1-7.6 25.3-7.6 10.1-20.9 15.3zm-43.4-100.3q0-6-2.2-10.6-2.1-4.7-6.9-7.9-4-2.7-9.6-3.7-5.5-1.1-13-1.1h-21.8v52.7h18.8q8.8 0 15.4-1.5 6.6-1.6 11.2-5.8 4.2-3.9 6.2-9 2.1-5.2 2.1-13z">
   <animate id="an_R" 
   attributeName="stroke-dashoffset" 
   values="740;0"
   dur="1s"
   begin="an_O.end"
   fill="freeze"/>
 </path>
<path id="E" stroke-dashoffset="757" stroke-dasharray="757" d="M568.7 406.9H476.7V267.3h92v16.5h-73.4v38.3h73.4v16.5h-73.4v51.8h73.4z">
    <animate id="an_E" 
   attributeName="stroke-dashoffset" 
   values="757;0"
   dur="1s"
   begin="an_R.end"
   fill="freeze"/>
 </path>
<path id="M" stroke-dashoffset="971" stroke-dasharray="971" d="m722.5 406.9h-18.6V286.6l-38.8 81.8h-11.1L615.5 286.6V406.9H598.2V267.3h25.3l37.2 77.7 36-77.7h25.8z">
    <animate id="an_M" 
   attributeName="stroke-dashoffset" 
   values="971;0"
   dur="1s"
   begin="an_E.end"
   fill="freeze"/>
 </path>
   </g>
    <animate 
  attributeName="fill"
  xlink:href="#letter"
  begin="an_M.end"
  dur="3s"
  values="black;red"
  fill="freeze"/>
</svg> 
</div>

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

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

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

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

<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="850" height="800" viewBox="0 0 850 800" preserveAspectRatio="xMinYMin meet" style="border:1px solid grey;" >
<path fill="none" stroke="black" stroke-dashoffset="0" stroke-dasharray="3986" d="M20.4 58.1H198.9L427.9 323 658 58.1H819.8L499.8 404.5 819.8 760.4H646L415.9 492 179.8 760.4H20.4L340.4 410.5Z" class="s0">
<!-- Анимация рисования контура "X" -->
  <animate id="an_sd" 
 attributeName="stroke-dashoffset"
 begin="start.click"
  values="3986;0"
  dur="4s"
  restart="whenNotActive"/>

  <!-- Анимация заполнения цветом "X" -->
<animate id="an_fill" 
 attributeName="fill"
 values="white;black" 
 dur="2s" 
 begin="an_sd.end"
 fill="freeze" 
 restart="whenNotActive"/> 
  <!-- Анимация из "X" в чёрный квадрат  -->
  <animate id="an_rec" 
   attributeName="d" values="M20.4 58.1H198.9L427.9 323 658 58.1H819.8L499.8 404.5 819.8 760.4H646L415.9 492 179.8 760.4H20.4L340.4 410.5Z;M20.4 58.1H198.9L427.9 59.3 658 58.1H819.8L822.2 406.9 819.8 760.4H646L427.9 760.5 179.8 760.4H20.4l0-353.5z"
   dur="4s"
   begin="an_fill.end"
   fill="freeze"
   restart="whenNotActive"/>
</path>
<g aria-label="LOREM" style="fill:none;  stroke:white; stroke-width:2; font-family:sans-serif;font-size:192;letter-spacing:0;line-height:1.3;word-spacing:0"> 
 <g id="letter" stroke-width="3">
<path id="L" stroke-dashoffset="458" stroke-dasharray="458" d="M175.4 406.9H87.1V267.3h18.6v123.1h69.8zM296.1 283.3">
  <!-- Анимация первой буквы "L" слова "LOREM" --> 
 <animate id="an_L" 
   attributeName="stroke-dashoffset" 
   values="458;0"
   dur="0.8s"
   begin="an_rec.end;"
   fill="freeze"
   restart="whenNotActive"/>
 </path>
<path id="O" stroke-dashoffset="770" stroke-dasharray="770" d="m296.1 283.3q8.5 9.4 13 23 4.6 13.6 4.6 30.8 0 17.3-4.7 30.9-4.6 13.6-12.9 22.7-8.6 9.5-20.4 14.3-11.7 4.8-26.8 4.8-14.7 0-26.8-4.9-12-4.9-20.4-14.2-8.4-9.3-13-22.8-4.5-13.5-4.5-30.8 0-17.1 4.5-30.6 4.5-13.6 13.1-23.2 8.3-9.2 20.4-14.1 12.3-4.9 26.7-4.9 15 0 26.9 5 12 4.9 20.3 14zm-1.7 53.8q0-27.2-12.2-41.9-12.2-14.8-33.3-14.8-21.3 0-33.5 14.8-12.1 14.7-12.1 41.9 0 27.5 12.4 42.1 12.4 14.5 33.2 14.5 20.8 0 33.1-14.5 12.4-14.6 12.4-42.1z">
 <!-- Анимация второй буквы "О" слова "LOREM" -->

  <animate id="an_O" 
   attributeName="stroke-dashoffset" 
   values="770;0"
   dur="1s"
   begin="an_L.end"
   fill="freeze"
   restart="whenNotActive"/>
 </path>
<path id="R" stroke-dashoffset="774" stroke-dasharray="774" d="m458.7 406.9h-24.1l-46.7-55.5h-26.2v55.5h-18.6V267.3h39.1q12.7 0 21.1 1.7 8.4 1.6 15.2 5.8 7.6 4.8 11.8 12.1 4.3 7.2 4.3 18.4 0 15.1-7.6 25.3-7.6 10.1-20.9 15.3zm-43.4-100.3q0-6-2.2-10.6-2.1-4.7-6.9-7.9-4-2.7-9.6-3.7-5.5-1.1-13-1.1h-21.8v52.7h18.8q8.8 0 15.4-1.5 6.6-1.6 11.2-5.8 4.2-3.9 6.2-9 2.1-5.2 2.1-13z">
   <animate id="an_R" 
   attributeName="stroke-dashoffset" 
   values="740;0"
   dur="1s"
   begin="an_O.end"
   fill="freeze"
   restart="whenNotActive"/>
 </path>
<path id="E" stroke-dashoffset="757" stroke-dasharray="757" d="M568.7 406.9H476.7V267.3h92v16.5h-73.4v38.3h73.4v16.5h-73.4v51.8h73.4z">
    <animate id="an_E" 
   attributeName="stroke-dashoffset" 
   values="757;0"
   dur="1s"
   begin="an_R.end"
   fill="freeze"restart="whenNotActive"
   />
 </path>
<path id="M" stroke-dashoffset="971" stroke-dasharray="971" d="m722.5 406.9h-18.6V286.6l-38.8 81.8h-11.1L615.5 286.6V406.9H598.2V267.3h25.3l37.2 77.7 36-77.7h25.8z">
    <animate id="an_M" 
   attributeName="stroke-dashoffset" 
   values="971;0"
   dur="1s"
   begin="an_E.end"
   fill="freeze"
   restart="whenNotActive"/>
 </path>
   </g> 
   <!-- Анимация анимация закраски слова "LOREM" --> 
    <animate 
  attributeName="fill"
  xlink:href="#letter"
  begin="an_M.end"
  dur="3s"
  values="black;red"
  fill="freeze"
  restart="whenNotActive"/>
  </g>

  <!-- Кнопка запуска анимации -->
  <g id="start"> 
   <rect x="20" y="10" rx="5" width="80" height="30" fill="transparent" stroke="black"/>
    <text x="36" y="32" font-size="24">Start</text>
  </g>
</svg>

</div>

это вообще круто ...ну тут же незя два ответа принять ? — Резидент Казахстана, Dec 13 '18 at 15:03
@UbuntuUser Добавил пример, где всё собрал вместе — Alexandr_TT, Dec 13 '18 at 15:49

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

2 Answers2

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

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

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

Linked