Javascript 用于动态文本的SVG线条动画

我正在尝试从用户输入中为文本实现绘图效果，以便看起来像是在编写

非常像本页上的“there”图：

我现在的位置：

所以编辑器抱怨没有代码，所以这里是一样的：

var path=document.getElementsByTagName（'path'）[0]；
//这不会返回真正的长度
var length=path.getTotalLength（）；
path.style.strokeDasharray=长度；
path.style.strokeDashoffset=长度；
var intervalId=setInterval（函数（）{
如果（长度<0）clearInterval（有效期）；
path.style.strokeDashoffset=--长度；
}, 25);
/*不需要这个吗*/
路径{
转换：转换（20px，100px）；
}
正如您所说，您使用的字体看起来只是一行。但事实并非如此。字符中的路径环绕字体轮廓的边界

这适用于所有字体。因此，任何svg文本转换实用程序都不适用于您

您几乎肯定必须自己将SVG转换为合适的格式。将转换后的SVG加载到Inkscape（或您最喜欢的向量编辑器）中，并使用单个（非填充）路径手动跟踪每个字母的形状

然后，您将拥有一个SVG，该SVG将与虚线偏移动画一起工作。
您是否尝试过笔划虚线偏移手动跟踪形状，如“用手绘制”中所示？我对Inkscape不是很熟悉，但是没有办法让它自动将上述形式的路径转换为笔划路径吗？不太可能。找到任意填充形状的“骨架”是一个相当困难的问题。如果所有字体都是这样，那么为什么我总是遇到好时、单线或雕刻字体，这些字体被定义为没有填充？我没有读太多，但矛盾的信息让我感到困惑。谢谢你的帮助！我说的是现代矢量字体，如TTF等。如果你能找到适合你需要的Hershey字体的SVG版本，那就太好了。但请注意，并非所有好时字体都是单笔画。他们通常使用几个笔划来表示字符中较胖的部分。另外，并非所有浏览器都支持SVG字体。您可能需要从字体中提取字形路径，并自己在页面上手动排列它们。