svg自学入门教程（自己动手写SVG路径动画）

火客 2023-07-18 15:50:50 103

svg自学入门教程（自己动手写SVG路径动画）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].getTotal

在我个人的博客网站树下魅狐的首页，使用了SVG路径动画来绘制LOGO。该动画采用SVG CSS的方式完成的。今天在这里快速的分享一下制作过程。

关于SVG

SVG是用于描述二维图形的一种语言。SVG允许使用三种类型的图形对象：矢量图形(例如：由直线和曲线组成的路径)，图像和文本。图形对象可以进行分组，样式设置，转换和合成。SVG和XML文件混合使用时，它可以使用XML语法，当SVG和HTML文件混合使用时，它又可以使用HTML的语法。

SVG的全称是Scalable Vector Graphics，翻译过来是可伸缩矢量图形。因此，SVG图形在放大或缩小的情况下其图形的质量不会有损失。SVG除了可以制作图像外，还可以用于制作各种小动画。在使用SVG之前，先得了解一下各大浏览器对其兼容性，下面通过一张图片来详细了解：

svg自学入门教程（自己动手写SVG路径动画）(1)

基于CSS和SVG实现路径动画

在开始介绍制作过程之前，通过一个动画了解一下最终的动画形态：

svg自学入门教程（自己动手写SVG路径动画）(2)

第一步：SVG文件

第一步，我们可以通过Adobe Illustrator软件生成一个自己想要的SVG路径。在本例中，我将字符“RAMOSTEAR”通过Adobe Illustrator生成了路径并导出到编辑器中，代码如下：

借助工具，可以快速生成我们想要的图形，你也可以手动书写，但效率很低（不推荐）

第二步：获取路径长度

我们将上述的代码插入到事先准备好的HTML文件中，然后通过JavaScript来获得每个路径的总长度。首先，将SVG代码插入到HTML代码中，如下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" 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路径动画(零基础三步曲视频教程)

网站首页

返回栏目