如何将毛笔字动画化，使其看起来像是手写的？

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>

任何想法如何使名称横跨，就像您实际上正在纸上写作一样？

- Martavis P.

---

请取消将此问题标记为重复。事实上，我是通过使用那个问题才走到了这一步。我正在询问如何以线性方式绘制它的更具体问题，这不是重复的。 - Martavis P.

这个脚本可以完全满足你的需求：http://codecanyon.net/item/responsive-svg-handwriting-font-animation-script/6719796 - user2267379

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

- Erik Dahlström

---

我一直在查看代码，发现了一个问题。我正在使用本地HTML SVG文本，但是我无法理解如何从中找到路径。 - Martavis P.

你不能真的期望使用 <text> 元素来实现这个，你需要使用矢量图形编辑器（尝试 Illustrator、Inkscape 或等效工具）将文本转换为 <path> 元素。根据你选择的字体，仅通过描边动画很难得到你想要的效果，如果你想要类似于书法的逐步绘制，你可能需要进行路径动画，这可能会更加困难。我会添加另一个资源，展示一种可能的方法。问题在于 SVG 还没有可变宽度笔画。 - Erik Dahlström

谢谢。我将这个标记为答案，因为最后一个例子真正涉及到了我正在尝试做的事情。我现在正在学习这个。谢谢！ - Martavis P.

@ErikDahlström，我能理解你在最后一句话中所说的，但我不太明白缺少它如何使渐进动画的书法风格变得困难。我正在尝试找到一种方法将文本（例如来自DOM元素）转换为带有正确路径的SVG（这是我遇到的困难），而不是使用矢量图形编辑器。我在你上一个回答中发布的评论中提出了这个问题，我问过的人也给了我这个。 - Arihant