在我个人的博客网站树下魅狐的首页，使用了SVG路径动画来绘制LOGO。该动画采用SVG+CSS的方式完成的。今天在这里快速的分享一下制作过程。
关于SVG
SVG是用于描述二维图形的一种语言。SVG允许使用三种类型的图形对象：矢量图形(例如：由直线和曲线组成的路径)，图像和文本。图形对象可以进行分组，样式设置，转换和合成。SVG和XML文件混合使用时，它可以使用XML语法，当SVG和HTML文件混合使用时，它又可以使用HTML的语法。
SVG的全称是Scalable Vector Graphics，翻译过来是可伸缩矢量图形。因此，SVG图形在放大或缩小的情况下其图形的质量不会有损失。SVG除了可以制作图像外，还可以用于制作各种小动画。在使用SVG之前，先得了解一下各大浏览器对其兼容性，下面通过一张图片来详细了解：
基于CSS和SVG实现路径动画
在开始介绍制作过程之前，通过一个动画了解一下最终的动画形态：
第一步：SVG文件
第一步，我们可以通过Adobe Illustrator软件生成一个自己想要的SVG路径。在本例中，我将字符“RAMOSTEAR”通过Adobe Illustrator生成了路径并导出到编辑器中，代码如下：
借助工具，可以快速生成我们想要的图形，你也可以手动书写，但效率很低（不推荐）
第二步：获取路径长度
我们将上述的代码插入到事先准备好的HTML文件中，然后通过JavaScript来获得每个路径的总长度。首先，将SVG代码插入到HTML代码中，如下：
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
接下来，在app.js中通过querySelectorAll()函数获取所有的路径，并通过getTotalLength()函数来获得每一个路径的总长度，代码如下：
const paths = document.querySelectorAll("#logo path");
const polygons = document.querySelectorAll("#logo polygon");
for(let i=0;i
说明：
在使用Adobe Illustrator导出SVG时，不完全是路径(path),还参杂着两个多边形(polygon),所以还需获得polygon的路径长度。
在浏览器中打开HTML文件，你可以在控制台中看到如下的日志信息：
app.js:3 p1 -> 587.9400634765625
app.js:3 p2 -> 537.8978271484375
app.js:3 p3 -> 756.9060668945312
app.js:3 p4 -> 523.8944091796875
app.js:3 p5 -> 525.183349609375
app.js:3 p8 -> 537.9104614257812
app.js:3 p9 -> 587.8800048828125
app.js:8 p6 -> 417.8800048828125
app.js:8 p7 -> 568.8799438476562
这样，我们就获得了所有图形的路径长度。接下来，就可以在CSS文件中操作这些参数。
第三步：样式文件
前面我们已经获取了所有图形的路径总长度，现在就可以利用CSS3的@keyframes和animation来定义动画。动画的定义很简单，主要是改变路径的stroke-dasharray和stroke-dashoffset两个参数。stroke-dasharray用于设置路径的总长度，stroke-dashoffset用于设置路径的偏移量。一开始，将各路径的长度和偏移量都设置为同一个值，然后再利用animation将偏移量变为0，这样就可以形成一个类似手写文字的动画效果。主要的CSS代码如下：
.cls-1{
stroke: #fff;
stroke-width: 2px;
}
#logo{
width: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
animation: text-fill-anim 0.5s ease forwards 4s;
}
#p1{
stroke-dasharray: 587.9400634765625;
stroke-dashoffset: 587.9400634765625;
animation: text-anim 3s ease forwards;
}
#p2{
stroke-dasharray: 537.8978271484375;
stroke-dashoffset: 537.8978271484375;
animation: text-anim 3s ease forwards 0.2s;
}
#p3{
stroke-dasharray: 756.9060668945312;
stroke-dashoffset: 756.9060668945312;
animation: text-anim 3s ease forwards 0.4s;
}
#p4{
stroke-dasharray: 523.8944091796875;
stroke-dashoffset: 523.8944091796875;
animation: text-anim 3s ease forwards 0.6s;
}
#p5{
stroke-dasharray: 525.183349609375;
stroke-dashoffset: 525.183349609375;
animation: text-anim 3s ease forwards 0.8s;
}
#p6{
stroke-dasharray: 417.8800048828125;
stroke-dashoffset: 417.8800048828125;
animation: text-anim 3s ease forwards 1s;
}
#p7{
stroke-dasharray: 568.8799438476562;
stroke-dashoffset: 568.8799438476562;
animation: text-anim 3s ease forwards 1.2s;
}
#p8{
stroke-dasharray: 537.9104614257812;
stroke-dashoffset: 537.9104614257812;
animation: text-anim 3s ease forwards 1.4s;
}
#p9{
stroke-dasharray: 587.8800048828125;
stroke-dashoffset: 587.8800048828125;
animation: text-anim 3s ease forwards 1.6s;
}
@keyframes text-anim {
to{
stroke-dashoffset: 0;
}
}
@keyframes text-fill-anim {
to{
fill: white;
}
}
这样，通过简单的三步，一个SVG+CSS的路径动画就制作完成了。
说明：
JS文件中的函数主要是辅助我们计算每个图形的路径长度，在动画制作完成后，可以将其删除。
视频教程
你可以通过下面的一段视频，了解整个动画的制作过程。
