从不会SVG到制作炫酷签名动画，全过程详细记录分享

2025-05-05 05:59:36 | 来源: 互联网整理

前言

最近，当浏览博客网站时，我发现一些博客具有非常酷的签名动画。查看代码后，我发现它是由SVG实施的。我擅长SVG，并且某些在线SVG生产工具不是很友好，因此尚未实施它们。直到最近，我发现一篇文章在（Chapu）[]的博客中写得很好，因此我开始创建自己的动态签名，并录制了生产过程，希望能帮助所有人。

步骤1：访问以选择您喜欢的字体。应当指出的是，大多数字体仅支持英语。如果您需要进行中文签名，则可能需要自己准备字体文件。选择字体后，请记住字体名称以进行后续使用。

选择字体图

接下来，访问字体访问SVG路径网站，选择您在字体中所做的字体，输入要在文本中显示的文本，检查联合选项，然后取消选中。效果如下：

生成SVG图

复制生成的SVG代码，然后转到SVG签名动画，以查看动画是否正常渲染。如果您发现SVG帆布很小并且无法完全显示签名，则可以通过调整属性来放大画布。例如， =“ 0 0 177.295 72.999” to =“ - 1 1 300 90”，并且可以在百度（Baidu）上找到属性，您会发现边框渲染已完成。如果它仍然不起作用，则需要使用Adobe等专业工具来调整SVG的宽度和高度。

渲染对比图

在您的网站或页面中动态签名，将样式和动画添加到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代码嵌入HTML时，请删除不必要的属性和标签。该属性必须保留。其他属性应通过删除是否影响渲染来确定。

复制

完成上述步骤后，您将获得一个很酷的SVG签名动画，并具有以下效果：

最终效果