在我个人博客网站树下的魅狐首页，用SVG路径视频画了一个标志。 这个动画是用SVG CSS方式完成的。 今天在这里简单分享制作过程。
关于SVG
SVG是用于描述二维图形的语言。 SVG提供三种图形对象：矢量图形(如由直线和曲线组成的路径)、图像和文本。 可以对图形对象进行分组、样式化、转换和合成。 如果SVG文件和XML文件混合存在，则可以使用XML语法；如果SVG文件和HTML文件混合存在，则可以使用HTML语法。SVG的全称是可缩放向量图形，翻译过来就是可缩放的向量图形。 因此，即使放大或缩小SVG图形，也不会损害该图形的质量。 除了图像以外，SVG还可以用于制作各种小动画。 在使用SVG之前，必须了解每个浏览器的兼容性。 让我们在下一张照片中详细看看。
在介绍
基于CSS和SVG实现路径动画
制作过程之前，先用一个视频了解最终的视频形态吧：
第一步：SVG文件
的第一步是使用Adobe Illustrator软件生成所需的SVG路径。 此示例在Adobe Illustrator中生成“RAMOSTEAR”字符的路径，并使用以下代码将其导出到编辑器中：SVG标识=' logo ' xmlns=' http://www.w3.org/2000/SVG '视图框=' 0938.57122.65 '
g
路径id=' P1 '类=' CLS-1 '
d=' m 86.87，39.76 C0-27.22-19.94-35.65-44.18-35.65 H2V 118.54 H28H 77.37 H13.6L 21.84，41.17 H29L 66.49，78 C78.71，61，和66.
路径id=' P2 '类=' CLS-1 '
d='m132.31、4.11、96.67、118.54 h 26.51 l7- 27.22 h 164.6 l 6.94、27.22h199l163.36、4.11zm3、67、2.71-10.55c2.9-11.42
路径id=' P3 '类=' CLS-1 '
d=' m 257.33，44.66 l-3.79，15.83 h-. 71l 249，44.66，237.77，4.11 h 210.62 v 118.54 h 21.55 v 83.11 c0- 12.88-2.17-40.78 -。
路径id=' P4 '类=' CLS-1 '
d='m358.53、2c-27.25、0-46、20.56-46、58.8、0、39.14、18.77、59.85、46、59.85s46-20.71、46-59.85 c 404.55
路径id=' P5 '类=' CLS-1 '
d=' m 483.46，54l-14-5.93 c-11-4.12-18.64-18.64-13.52，0-6.69，5.79-10.22，14.32-10.22，11.18
,17a55.46,55.46,0,0,0-38-15c-24.86,0-41.93,15.15-41.93,34.1,0,16.65,11.57,26.38,24.25,31.2l14.91,6.36c10.83,4.54,17.63,6.53,17.63,14.77,0,5.59-5.08,9.85-16.07,9.85s-21.76-4.86-30.42-12l-14.86,17.79a65.91,65.91,0,0,0,43.57,16.53c28.32,0,44.28-16.48,44.28-35.5C507.9,69,498.44,59.66,483.46,54Z"/> <polygon id="p6" class="cls-1" points="521.97 25.82 556.28 25.82 556.28 118.54 582.18 118.54 582.18 25.82 616.48 25.82 616.48 4.11 521.97 4.11 521.97 25.82"/> <polygon id="p7" class="cls-1" points="664.01 70.49 706.45 70.49 706.45 48.77 664.01 48.77 664.01 25.82 713.97 25.82 713.97 4.11 638.11 4.11 638.11 118.54 715.72 118.54 715.72 96.82 664.01 96.82 664.01 70.49"/> <path id="p8" class="cls-1" d="M764.4,4.11,728.76,118.54h26.5l7-27.22h34.43l7,27.22h27.45L795.44,4.11Zm3,67,2.7-10.55c2.9-11.42,6.08-24.82,8.88-36.9h.7c2.76,12.08,6.24,25.48,9.14,36.9l2.69,10.55Z"/> <path id="p9" class="cls-1" d="M935.14,118.54,909.27,72.78c12.22-5.53,20.38-16.21,20.38-33,0-27.22-19.94-35.65-44.19-35.65H844.78V118.54h26V77.37h13.6l21.84,41.17ZM870.73,24.66h12.63c13.6,0,20.9,3.8,20.9,15.1s-7.3,17.06-20.9,17.06H870.73Z"/> </g> </svg>借助工具，可以快速生成我们想要的图形，你也可以手动书写，但效率很低（不推荐）
第二步：获取路径长度
我们将上述的代码插入到事先准备好的HTML文件中，然后通过JavaScript来获得每个路径的总长度。首先，将SVG代码插入到HTML代码中，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" rel="external nofollow" href="css/style.css"> <title>SVG TEXT ANIMATION</title> </head> <body> <svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 938.57 122.65"> //... </svg> <script src="js/app.js"></script> </body> </html>接下来，在app.js中通过querySelectorAll()函数获取所有的路径，并通过getTotalLength()函数来获得每一个路径的总长度，代码如下：
const paths = document.querySelectorAll("#logo path"); const polygons = document.querySelectorAll("#logo polygon"); for(let i=0;i<paths.length;i++){ console.log(paths[i].getAttribute("id")+" -> "+paths[i].getTotalLength()); } for(let i=0;i<polygons.length;i++){ console.log(polygons[i].getAttribute("id")+" -> "+polygons[i].getTotalLength()); }说明：
在使用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文件中的函数主要是辅助我们计算每个图形的路径长度，在动画制作完成后，可以将其删除。
视频教程
你可以通过下面的一段视频，了解整个动画的制作过程。
视频加载中...
自己动手写SVG路径动画(零基础三步曲视频教程)