如何动画书法文字就好像是用手写的

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