如何将书法文字动画化，就好像它是手写的一样答案

【问题标题】：How to animate calligraphy text as if it's written by hand如何将书法文字动画化，就好像它是手写的一样
【发布时间】：2014-05-27 15:55:04
【问题描述】：

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

我使用下面的代码，你可以看到完整的here：

<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>

知道我怎样才能让名字写出来，就好像你真的在纸上写字一样？

【问题讨论】：

请取消将此标记为重复问题。事实上，通过使用这个问题，我已经走到了这一步。我在问一个更具体的问题，即如何以线性方式绘制它，这不是重复的。
这个脚本做你想做的事：codecanyon.net/item/…

标签： html css svg

【解决方案1】：

将文本转换为路径（您很可能需要一个描述如何绘制每个字母的路径），然后为stroke-dashoffset 制作动画，有关详细信息，请参阅How to draw a vector path progressively? (Raphael.js)。

一些资源（带有示例）可供浏览：

【讨论】：

我一直在查看事情，但有一个问题。我正在使用本机 HTML svg 文本。我无法理解如何从中找到路径。
你不能真的期望使用元素，你必须使用矢量图形编辑器将文本转换为元素（尝试 Illustrator、Inkscape 或等效）。从您选择的字体来看，仅通过对笔画进行动画处理将很难获得您所追求的内容，如果您正在寻找类似书法的渐进式绘图，您可能必须进行路径动画，不幸的是这相当有点难。我将添加另一个资源，显示一种可能的方法。一个问题是 SVG 还没有可变宽度的笔画。
谢谢。我将此标记为答案，因为最后一个示例确实涉及我正在尝试做的事情。我现在正在研究这个。谢谢！
@ErikDahlström，我可以理解最后一行所说的内容，但无法完全理解缺少它如何使渐进动画的书法风格变得困难。我正在尝试找到一种方法来转换文本（例如从 DOM 元素），使用正确的路径（我遇到的困难）转换为 svg，而不是使用矢量图形编辑器。我在你在答案中发布的最后一个链接的 cmets 中asked this，也是我要求它的人，提供给我this。