电子签名需求期望方案灵活易用，便于设计师和产品经理发挥创意与自定义，但当前多数依赖 JS 和 Canvas 的方案形成技术鸿沟，阻碍了这一目标实现。如何在满足功能的同时降低技术门槛，成为电子签名方案亟待解决的矛盾，而基于 SVG 的方案或许是破局关键。

目前网络上绝大多数电子签名方案，都依赖于直接注入 JavaScript 脚本并调用 Canvas 元素来实现。这种方式虽然功能强大灵活，但对于不具备编程背景的设计师和产品经理而言，若要调整样式、交互或扩展功能，几乎无从下手。这使得本应灵活易用的签名组件，变成了一道技术鸿沟，严重限制了设计创意和产品自定义的发挥空间。

签字，是承诺的终极形态，是终结与开启的分界，是秩序与责任的铁证。

一签一诺，重若千钧。

预览

预览地址：https://usrsky.axshare.com/#id=w2dd4f&g=1

可以看出，笔迹书写非常流畅，全程毫无卡顿与延迟，真实还原纸上书写的跟手感。线条过渡自然柔和，无生硬尖锐之感，整体视觉效果舒适优雅。

原理

如果不借助JS和Canvas，还需要动态生成图片，那么SVG（Scalable Vector Graphics）就非常适合。

SVG基本形状中<path>元素是最强大的一个，你可以用一行代码创建任意形状（线条、曲线、弧形等等）。

准备

我们需要准备一个动态面板。动态面板内部放一张图片，两个文本域（sign和drawing）。动态面板外面放一个“重置”按钮。

结构如下：

1）动态面板：自适应内容，如设置背景色和边框样式即为签字板的背景和边框。

• 图片：X：0Y：0宽度高度自己定。
• 文本域sign：X：0Y：0W：1H：1隐藏。
• 文本域drawing：X：0Y：0W：1H：1隐藏。

2）重置按钮

交互

文件域sign的交互如下：

载入时[设置文本]的内容为：

文件域drawing的交互如下：

动态面板的交互如下：

拖动结束时[设置文本]的内容为：

重置按钮的交互为：

这样一个手写签名板就完成了。

扩展

恭喜！你已进入Axure的「绘图新纪元」，这是一个属于创造者的新篇章，此刻起，逻辑与美学将由你定义，无限可能正待你挥洒创意。

这里不仅是原画的舞台，更是无限可能的创造工厂！这一功能可灵活扩展为多种实用场景，例如：

• 画图板：自由绘制创意灵感，轻松表达设计思路https://usrsky.axshare.com/#id=7kgfjw&g=1
• 作业批改：直接在原型上批注反馈，沟通更直观、修改更高效
• 文档批注：像在纸上一样标记重点，让说明文档也变得生动起来
• 地图标记：快速标注动线、区域，规划用户路径一目了然
• …还有更多玩法等你发掘！

无论是流程示意、UI草图，还是互动演示，手动绘图都能成为你的得力助手。发挥创意，动手试试吧 —— 意想不到的绘图体验，正等你来探索！