Как анимировать рукописный текст на веб-странице с помощью SVG

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

Я пытаюсь анимировать текст, который я создал и сохранил как SVG. До сих пор мне
удавалось только оживить stroke, но это не то, что я хочу получить.
Вот ссылка на пример, что мне нужно:         

SE7ENSKY Frontend studio        

Handwriting: SVG animation           

Я буду очень признателен, если кто-нибудь сможет объяснить, как я могу это реализовать.
    

Ответы

Ответ 1

Как работает анимация Se7ensky в вашей ссылке, так это то, что она использует стандартную
технику анимации dash, но обрезает у анимированной stroke выступающий контур, представляющий,
нарисованный вручную  логотип.   

Стандартная техника анимации dash работает следующим образом, - вы берете стандартную
линию:   








Затем вы добавляете к стандартной линии dash pattern и анимируете его положение изменением
stroke-dashoffset.     



.pen {
  stroke-dasharray: 280 280;
  stroke-dashoffset: 280;
  animation-duration: 2s;
  animation-name: draw;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes draw {
  from {
    stroke-dashoffset: 280;
  }

  to {
    stroke-dashoffset: 0;
  }
}





Наконец, чтобы получить необычную переменную ширину обводки примера Se7ensky, вы
окружаете эту линию контуром вашего логотипа.       

Итак, давайте представим, что этот простой path ниже обрисовывает ваш логотип:   








Мы превращаем это в элемент clipPath и используем его, чтобы обрезать нашу анимированную
строку по форме логотипа: 



.pen {
  stroke-dasharray: 280 280;
  stroke-dashoffset: 280;
  animation-duration: 2s;
  animation-name: draw;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes draw {
  from {
    stroke-dashoffset: 280;
  }

  to {
    stroke-dashoffset: 0;
  }
}
 




Таким образом, чтобы повторить  пример, указанный по ссылке, вам нужно добавить непрерывный
path  в SVG, который представляет путь, который выберет перо, как будто оно будет писать
буквы в вашем логотипе.   

Затем анимируйте этот путь, используя технику dashoffset, обрезая его своим оригинальным
логотипом.



.pen {
  fill: none;
  stroke: red;
  stroke-width: 18;
  stroke-linecap: round;
  clip-path: url(#logo);

  stroke-dasharray: 206 206;
  stroke-dashoffset: 206;
  animation-duration: 2s;
  animation-name: draw;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes draw {
  from {
    stroke-dashoffset: 206;
  }

  to {
    stroke-dashoffset: 0;
  }
}