引入

在看完 https://yfi.moe/post/animated-signature-svg 这篇文章后，我也跟着做了一个签名，但是由于它依赖CSS控制其动画导致无法单独使用或放进Github的README文档

并且这样的签名笔画粗细太单一，没有“真正”签名的观感

于是有了以下折腾过程，参考 Innei 的签名自己总结了制作方法

制作过程

1.获取签名svg文件

两种途径生成的签名最好都能一笔写完，且笔画重叠的地方较少

途径一：字体转svg

如果图简单可以直接在此处，输入名字并选择用一个喜欢的字体，直接复制字体svg文件

途径二：AI生成或手绘

可以自己用数位板签名，注意导出为图片时要纯色背景

也可以使用Chatgpt image 2 生图，纯色背景，效果也很好，不需要处理背景也能直接抠出轮廓来

然后把图片转换为svg格式

如图：

2.添加动画

仔细观察Innei的签名及源文件

注意到动画的原理是笔迹遮罩在上方背景，从左到右填充

直接交给gpt照葫芦画瓢的话：

这是我生成的svg签名文件: <svg>......<svg>

长的一笔是是主体，短的一笔是字母i上的点，现在我想参考下面这个动画版的签名svg，把我的签名也改为动态，请你帮我完成
参考的动态svg签名：https://raw.githubusercontent.com/Innei/Innei/master/innei-signature.svg

可以看到由于我的签名整体向右上方倾斜，导致从左到右填充背景时，会出现一些地方会两笔同时画，不太符合“一笔签名”的直觉

当然，若你的签名正好整体是从左往右书写的，那观感应该会很好，只需要调整背景填充的速度，让它看起来更自然就能做完了

如果你的签名也有相似的问题，可以继续往下看参考我的解决方法

3.导入Figma勾勒笔迹

将svg文件导入Figma

Figma: The Collaborative Interface Design Tool

Figma is the leading collaborative design platform for building meaningful products. Design, prototype, and build products faster—while gathering feedback all in one place.

Figma

使用钢笔工具选择一个合适的笔刷大小，沿着签名书写的方向勾勒笔画，注意：

• 每个地方都能恰好覆盖
• 钢笔轨迹不能断开，不能在同一点交叉（即除了首尾，每个点只能被两条线相连）

可以发现在笔迹交叉的地方，更粗的背景笔迹会导致另一侧的笔画线出现一小部分：

示意图	实际表现

不过通过调整书写的速度，基本不会对观感造成影响，也能有很好的效果。

在右侧面板把背景填充轨迹单独导出为svg

4.添加轨迹动画

发送给gpt处理：

我的新方案是：用 Figma 描的中心线作为 mask 动画，原始签名轮廓作为真实显示层。使用SMIL 动画。
请改为按照特定的轨迹填充背景
这是勾勒的背景svg轨迹<svg>......<svg>，当它的宽度为20时正好能超出每处的边缘，请你帮我完成最终的svg

最终输出的svg：

完整参数解析(AI GEN)：

<?xml version="1.0" encoding="UTF-8"?>

5.优化动画

重点需要调整的参数是<animate>中的：

• dur: 表示一个完整动画周期持续时间
• keyTimes: 控制应用每个values值对应的时间点
• keySplines: 定义每两个关键时间点之间的缓动曲线，调大 x1 x2 y1 y2中的 x1和 y1值可以让书写动画更“快速进入、平滑完成”。我也是通过调大此值来让开头笔画有交叉的部分更快播放，这样观感更佳。