如何将书法文本制作成动画，就像手写的一样

Question

我正在寻找一些方向，不一定是代码。
我想用 SVG 文本拼出我的名字。
到目前为止，我已经能够放置它并允许它为绘图制作动画，但它不会以线性书写方式发生。

我使用下面的代码，您可以在这里完整地看到：

<svg width="700" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <text class="path" xml:space="preserve" text-anchor="middle" font-family="pharmount" font-size="100" id="svg_1" y="230" x="300" stroke-width="2" stroke="#000000" fill="#000000">Martavis Parker</text>
</svg>

知道如何才能让名字写在纸上吗？

Answer 1

将文本转换为路径（您很可能需要一个描述如何绘制每个字母的路径），然后制作动画

stroke-dashoffset

，请参阅如何逐步绘制矢量路径？ (Raphael.js) 了解更多详情。

一些需要浏览的资源（带有示例）：

• http://css-tricks.com/svg-line-animation-works/
• http://lazylinepainter.info/
• http://cssdeck.com/labs/ironman-svg-line-animation
• https://medium.com/the-javascript-collection/ded23320ffe5

Answer 2

如果 SVG 不适合您，可以在 https://eHandWriting.net 找到一个纯 JS 解决方案，并且还有一个演示它的视频 https://youtu.be/QIYblE_m5Z0