如何为书法文字制作动画,就好像它是用手写的一样

时间:2014-05-26 07:09:59

标签: html css svg

我正在寻找一些方向,而不是代码 我想用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>

我知道如何才能让这个名字写得好像你真的在纸上书写一样吗?

1 个答案:

答案 0 :(得分:13)

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

要查看的一些资源(包含示例):