制作炫酷的SVG签名动画

制作炫酷的SVG签名动画

前言最近在浏览博客网站时,发现一些博客有非常炫酷的签名动画,看了一下代码发现是SVG实现的,我对SVG不怎么会,一些在线SVG制作工具也不怎么友好,所以一直没有实现。直到最近在(柃夏chapu)[https://www.lxchapu.com/]的博客中,发现一篇文章写的很好,所以动手制作了一个属于自己的动态签名,并把制作过程记录下来,希望能帮助大家。

步骤首先,访问fonts.google.com选择你喜欢的字体。需要注意的是,大部分Google Fonts只支持英文,如果你需要制作中文签名,可能需要自己准备字体文件,选择好字体后,记住字体名称,以便后续使用。

接下来,访问Google Font to Svg Path这个网站,在Google font中选择刚刚的字体,在text中输入你想要显示的文字,勾选union选项,并取消勾选Non-Scaling Stroke。效果如下:

复制生成的SVG代码,前往SVG签名动画查看是否正常渲染动画,如果发现SVG画布较小,无法完整显示签名,可以通过调整viewBox属性来放大画布。例如,将viewBox="0 0 177.295 72.999"修改为viewBox="-1 1 300 90",viewBox属性具体可以百度一下,就发现边框渲染完整了。如果还是不行则需要借助专业工具如Adobe Illustrator来调整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;

}

}

在HTML中嵌入SVG代码时,删除多余的属性和标签,必须保留viewBox 属性,其他属性看删除是否影响渲染。

复制

...

完成以上步骤后,你将获得一个炫酷的SVG签名动画,效果如下:

参考制作一个好看的动态签名