作为一个曾经被 SVG 劝退 800 次的手残选手，我懂你！每次看到别人博客里那些会自己画出来的炫酷签名，感觉就像在裸考数学考场上看别人提前交卷——弱小、可怜、又柠檬精附体。

直到最近在 柃夏 chapu 的博客中，发现一篇文章写的很好，所以动手制作了一个属于自己的动态签名，并将制作过程记录下来。

一、前期准备

1.​选择字体

访问 fonts.google.com，挑选喜欢的字体（大部分仅支持英文，中文需自备字体文件），记下字体名称备用。

2.​生成 SVG 代码

前往 Google Font to Svg Path 网站，选择上述字体，在 text 中输入文字，勾选 union 选项，取消勾选 Non - Scaling Stroke，复制生成的 SVG 代码。

二、调整 SVG 画布

1.​初步调整

将 SVG 代码粘贴到 动画网页中，若画布小无法完整显示签名，修改 viewBox 属性。例如将 viewBox="0 0 177.295 72.999"改为 viewBox="-1 1 300 90"。

2.​进一步调整（如需要）​

若仍不理想，可借助 Adobe Illustrator 等专业工具调整 SVG 的宽高。

三、添加动画和样式

1.​添加 CSS 样式和动画

• 在 CSS 中为 SVG 签名添加样式和动画，代码如下：

.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;
  }
}

2.嵌入 html

• 在 HTML 中嵌入 SVG 代码时，删除多余属性和标签，保留 viewBox 属性，其他属性根据是否影响渲染决定是否删除。

<svg width="300" height="100" viewBox="-1 1 300 90">
    <g stroke-linecap="round" fill-rule="evenodd">...</g>
</svg>