24年5月8日周三3分钟教程：用Google Fonts生成SVG动态签名

制作一个好的动态签名项目

5月8日动态签名，星期三24

560个字

3分钟

教程

，SVG

过去，我在其他博客中看到了动态签名，并猜到了一般实施方法。但是因为我觉得我的手写签名不是很好，所以我没有这样做。我在Innei的博客中意外地了解到，字体实际上可以用来生成相应的SVG，因此我学会了自己制作一个。

这是特定步骤：

转到字体的网站找到您喜欢的手写字体。它可以在过滤器选项中添加，以便仅显示手写字体。

建议在这里选择此字体，这是我认为看起来更好的字体。

然后访问此网站生成SVG。这是大个子制作的在线工具，可以根据字体生成SVG路径。

只需保持字体尺寸100即可。您需要检查Union并取消选中。一个小技巧：选择字体时无需滚动。您可以直接输入所选下拉列表的相应字体名称，以快速找到所需的字体。

如果将生成的签名图像放大，您会发现字体中风无法完全显示，因此我们需要将画布放大一点，以保留中风的空间。

使用Adobe打开SVG文件，打开选项，将宽度和高度增加几个像素，确保可以显示中风，然后保存文件。

在添加动画之前，第一个处理SVG，删除不必要的属性和标签，仅保留路径信息以及属性。

XML

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

接下来，将其添加到您的页面中，我们将其添加样式和动画。

CSS如下：

CSS

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

动画如下：

CSS

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

实际上，它仅使用troke-属性和 - 实现路径动画。

最终效果：

完整的代码在上面共享。

参考

目录

进度0％

文章标题：做一个好的动态签名️