Javascript SVG手写字母画动画

我正在努力理解SVG动画，目前我坚持一个字母一个字母地画一个标语。字体是手写的，应该像用文字标记一样填写。有人能给我一些如何解决这个问题的提示吗？或者有没有更好更有效的方法

下面是我想一个字母一个字母动画化的口号：

不同的

现在svg的制作方式不允许您制作所需的动画。

stroke dasharray

动画本身不允许您绘制字母，因为笔划“围绕”字母，就好像它们是用文本标记制作的一样。您可以在以下示例动画中看到这一点：

路径{
填充：透明；
行程：#000；
笔画宽度：1；
笔划数组：0,0800；
动画：笔划3秒放松；
}
@关键帧笔划{
来自{stroke dasharray:080080；}
到{stroke dasharray:0,0800；}
}

不同的

使用stroke dasharray，您可以设置边框动画，但为了达到效果，我认为您需要使用路径作为

clipPath

，并将其应用于

g

元素

然后在

g

元素内部绘制一个单线路径笔划，您将对其设置动画以模拟标记效果（宽度必须足够宽以覆盖字符线，但足够窄以不侵入下一个字符）

以下是设置剪裁区域背景动画的示例：

rect{
动画：scat 4s无限交替
}
@关键帧scat{
0% {
变换：scaleY（1）rotateZ（0）；
}
33%{
变换：scaleY（0.33）rotateZ（30度）；
}
66%{
变换：scaleY（0.66）rotateZ（-30度）；
}
100% {
变换：scaleY（0.1）rotateZ（0）；
}
}

---

使用stroke dasharray并设置动画。这个网站上已经有很多关于这方面的问题和答案了