如何使用 SVG 为网页上的手写文本设置动画?

Se7ensky 动画的工作原理是它使用标准的破折号动画技术，但使用代表手绘徽标外观的轮廓剪辑动画笔划.

How the Se7ensky animation works is that it uses the standard dash animation technique, but clips the animated stroke with an outline representing the hand-drawn look of the logo.

所以标准的破折号动画技术的工作原理如下.你走标准路线:

So the standard dash animation technique works as follows. You take a standard line:

<svg>
  <path d="M 10,75 L 290,75" stroke="red" stroke-width="50"/>
</svg>

然后向其添加虚线图案并为其位置设置动画(stroke-dashoffset).

Then you add a dash pattern to it and animate it's position (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;
  }
}

<svg>
  <path class="pen" d="M 10,75 L 290,75" stroke="red" stroke-width="50"/>
</svg>

最后，为了获得 Se7ensky 示例的奇特的可变笔画宽度，您可以用徽标的轮廓剪裁该线条.

Finally to get the fancy variable stroke width of the Se7ensky example, you clip that line with the outline of your logo.

让我们假设下面这条简单的路径代表您的徽标:

So let's pretend this simple path below represents your logo:

<svg>
  <path stroke="black" stroke-width="1" fill="lightgrey"
        d="M 40,50
           C 110,55 195,60, 265,55
           C 290,55 290,85 265,85
           C 195,85 110,85 40,100
           C 0,100 0,50 40,50 Z"/>
</svg>

我们将其转换为 clipPath 元素，并使用它来将动画笔触修剪为徽标的形状:

We turn that into a clipPath element and use it to trim our animated stroke to the shape of our logo:

.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;
  }
}

<svg>
  <clipPath id="logo">
    <path d="M 40,50
             C 110,55 195,60, 265,55
             C 290,55 290,85 265,85
             C 195,85 110,85 40,100
             C 0,100 0,50 40,50 Z"/>
  </clipPath>
  
  <path class="pen" d="M 10,75 L 290,75" stroke="red" stroke-width="50" clip-path="url(#logo)"/>
</svg>

因此，要复制他们的示例，您需要向 SVG 添加一条连续路径(或路径，如果您愿意)，该路径表示笔在您的徽标中书写字母时所采用的路径.

So to replicate their example, you'll need to add a continuous path (or paths if you want) to your SVG that represents the path that a pen would take if it were writing the letters in your logo.

然后使用 dashoffset 技术为该路径设置动画，同时使用您的原始徽标对其进行剪辑.

Then animate that path using the dashoffset technique while clipping it with your original logo.

更新

这是一个更逼真的字母形状的最终演示:

Here's a final demo with a more realistic letter shape:

// Simple code to enable and disable the clipping path
var chk = document.getElementById("chk");
var penpath = document.getElementById("penpath");

chk.addEventListener("input", function(evt) {
  if (evt.target.checked) {
    penpath.classList.add("clipped");
  } else {
    penpath.classList.remove("clipped");
  }
});

.pen {
  fill: none;
  stroke: red;
  stroke-width: 18;
  stroke-linecap: round;

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

.clipped {
  clip-path: url(#logo);
}

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

  to {
    stroke-dashoffset: 0;
  }
}

<svg>
  <defs>
    <clipPath id="logo">
      <path d="m85.77 49.77c-10.59 8.017-27.38 21.95-41.58 21.95-6.396 0-12.99-2.481-12.39-9.735l0.3998-4.199c38.38-12.03 48.17-26.15 48.17-35.5 0-7.635-7.995-9.162-14.39-9.162-25.98-0.1909-54.97 25.39-54.17 50.39 0.3998 12.6 7.196 25.01 21.79 25.01 19.79 0 41.78-17.94 53.97-31.5zm-52.37-1.336c5.397-12.6 16.99-21.76 26.98-24.24 1.399-0.3818 2.399 0.7635 2.399 2.1 0.1999 3.245-11.79 16.42-29.38 22.14z"/>
    </clipPath>
  </defs>
  
  <path id="penpath" d="m39.02 51.1c5.361-1.771 10.04-4.182 15.98-7.857 6.019-3.933 9.841-7.728 12.77-10.71 1.403-1.369 12.03-15.97-7.857-13.93-9.824 1.01-19.62 8.3-26.16 14.91-6.538 6.61-10.42 14.51-11.96 22.23-2.559 12.76 1.807 26.19 21.07 23.48 13.96-1.965 32.59-14.55 43.66-25.54" class="pen clipped"/>
</svg>


<p>
<input id="chk" type="checkbox" checked="true"/> <label for="chk">Enable clipping path</label>
</p>