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

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

知道如何才能让名字写起来就像您真的在纸上写字一样吗?

最佳答案

将文本转换为路径(您很可能想要一个描述您如何绘制每个字母的路径),然后为 stroke-dashoffset 设置动画,参见 How to draw a vector path progressively? (Raphael.js)了解更多详情。

要查看的一些资源(带有示例):

关于html - 如何为书法文字制作动画,就好像它是手写的一样,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23864588/

相关文章:

html - 在 Bootstrap 中从无响应到响应的最简单方法是什么?

css - 我们如何在 Angular 中为 *ngIf 添加过渡效果?

css圆 Angular

javascript - 随机播放音轨,无需递归

html - 如何在通过 div 元素构建的表中进行嵌套枚举?

html - 为原子中的结束标记设置颜色

javascript - Facebook 点赞和发送按钮弹出方向

javascript - "textLength"Internet Explorer 中 svg 文本元素悬停时发生变化

javascript - SVG 并排 - 将它们全部旋转 90 度

jquery动态改变svg图像xlink :href