SVG를 사용하여 웹 페이지에서 손으로 쓴 텍스트에 애니메이션을 적용하는 방법은 무엇입니까?

SVG를 사용하여 웹 페이지에서 필기 텍스트에 애니메이션을 적용하는 방법은 무엇입니까?

문제:

저는 다음과 같은 예에서 볼 수 있는 필기 텍스트 애니메이션 효과를 모방합니다. [이것](http://codepen.io/se7ensky/pen/waoMyx) 및 [이것](https://codepen.io/munkholm/pen/EaZJQE). 그런데 전체 텍스트가 아닌 획에만 애니메이션을 적용할 수 있었습니다.

코드:

.test {
  width: 300px
  /*   margin:0 auto; */
}

.l1 {
  animation: dash 15s 1;
  stroke-linecap: round;
  stroke-miterlimit: 10;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation-fill-mode: forwards;
  /*fill: none;*/
}

.l2 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 20s linear forwards;
  -webkit-animation-delay: 1s;
  /* Chrome, Safari, Opera */
  animation-delay: 1s;
}

.l3 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 25s linear forwards;
  -webkit-animation-delay: 2.5s;
  /* Chrome, Safari, Opera */
  animation-delay: 2.5s;
}

.l4 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 25s linear forwards;
  -webkit-animation-delay: 4.5s;
  /* Chrome, Safari, Opera */
  animation-delay: 4.5s;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg class="test" version="1.1">

위 내용은 SVG를 사용하여 웹 페이지에서 손으로 쓴 텍스트에 애니메이션을 적용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!