手把手教你制作炫酷的 SVG 签名动画

前言

经常在一些站点看到炫酷 SVG 签名动画，当时就感觉特别酷炫，但因为我对 SVG 不太熟悉，查了不少教程，发现步骤太繁琐，直接劝退。直到今天，在 BLLBLL 看到一篇 SVG 动画教程，心血来潮又试了一下，结果居然成功了！这次就来分享一下，这种炫酷的 SVG 签名动画到底是怎么做的，希望可以帮助到大家！

实现教程

1.首先，打开 Google Fonts 选择自己喜欢的字体。需要注意，大部分 Google Fonts 只支持英文，如果要制作中文签名，可能需要自己准备字体文件。

2.选择好字体后，记下字体名称，方便后续使用。

3.接下来，打开 Google Font to SVG Path，在字体列表中选择刚刚挑选的字体，在 Text 输入框中输入想要显示的文字。然后，勾选 Union 选项，并取消勾选 Non-Scaling Stroke，这样可以确保路径合并，避免笔画断裂。效果如下：

4.复制生成的 SVG 代码，前往 SVG 签名动画工具查看是否正常渲染动画，如果发现 SVG 画布太小，导致签名无法完整显示，可以调整 viewBox 属性来放大画布。例如，将：viewBox="0 0 177.295 72.999" 修改为：viewBox="-1 1 300 90"，viewBox 具体的调整方法可以百度一下，通常修改后就能让边框完整显示。如果调整后仍然显示不全，可能需要借助 Adobe Illustrator 等专业工具来调整 SVG 的宽高。

使用 Adobe Illustrator 来调整 SVG 的宽高 （点击展开）+

1.先将 SVG 图片 下载到本地

2.接着使用 Adobe Illustrator 工具打开 SVG 文件，双击功能区的 画板工具 

在弹出的窗口中，适当增加宽高几个像素，确保描边能够完整显示。调整完毕后，保存文件，并导出优化后的 SVG 代码，以便后续使用

修改后的渲染效果

5.接着我们将边框渲染完整的svg文件保存到本地，添加动画之前，先处理一下 SVG 代码，删除多余的属性和标签，只保留路径信息，同时保留 viewBox 属性

<svg viewBox="0 0 297 80">
 <g>
  <path d="xxxxxxxxxxx" />
 </g>
</svg>

6.接着为SVG签名添加样式和动画。以下是CSS代码：

.animated-signature path {
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  fill: transparent;
  animation: drawSignature 8s linear infinite both;
  stroke-width: 2px;
  stroke: black;
}

@keyframes drawSignature {
  0% {
    stroke-dashoffset: 2400;
  }
  15% {
    fill: transparent;
  }
  35%,
  75% {
    stroke-dashoffset: 0;
    fill: black;
  }
  90%,
  to {
    stroke-dashoffset: 2400;
    fill: transparent;
  }
}

完成以上步骤后，你就可以获得一个炫酷的SVG签名动画啦！