如何使用SVG的Dash动画创建手绘文本动画效果？

如何使用 SVG 在网页上制作手写文本动画？

问题陈述：

您正在尝试对保存为 SVG 的文本进行动画处理，但您只能够为笔画设置动画，但这不是所需的效果。您希望实现类似于给定示例的动画，从而创建手绘外观。这是您到目前为止所拥有的：

代码示例：

<div>
<pre class="brush:php;toolbar:false">.test {
  width: 300px;
}

.l1 {
  animation: dash 15s 1;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation-fill-mode: forwards;
}

.l2 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 20s linear forwards;
  animation-delay: 1s;
}

.l3 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 25s linear forwards;
  animation-delay: 2.5s;
}

.l4 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 25s linear forwards;
  animation-delay: 4.5s;
}

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

答案：

动画您想要实现的目标使用标准的破折号动画技术，但使用类似于手绘风格。

Dash动画技术：

标准线，例如：

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

通过控制值来动画关键帧中的Stroke-DashArray和Stroke-DashOffset动画。

.path {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 15s 1;
  animation-fill-mode: forwards;
}

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

在此示例中，Stroke-dasharray 属性定义了路径上的虚线和间隙的长度，Stroke-dashoffset 定义了路径内虚线的偏移量。随着动画从 0% 进展到 100%，笔画短划线偏移值会减小，导致虚线沿着路径逐渐出现。

创建手绘外观：

要使用轮廓剪辑动画笔划，需要使用一个附加的 SVG 路径以及与动画笔划的宽度和颜色相匹配的笔划。该轮廓路径应覆盖动画笔划将占据的整个区域。通过将轮廓的描边线连接属性定义为斜接，创建了尖角样式，给人一种手绘线条的印象。