利用SVG制作名字画板

最新推荐文章于 2024-05-10 12:42:21 发布

Skrupellose

最新推荐文章于 2024-05-10 12:42:21 发布

阅读量901

点赞数 1

分类专栏：前端文章标签：前端 JS SVG

本文链接：https://blog.csdn.net/qq_44042205/article/details/94588904

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

SVG

关于SVG

SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。

需要用到的：

js ，动态地为元素添加样式；
css3 ,我们需要css的动画属性；
一个自动生成路径的在线网站：https://editor.method.ac/；
以及一些关于SVG的基础知识；

好的，让我们开始：

1.生成一个h5文档：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2.进入在线生成路径的网站进行绘制：
在这里插入图片描述
点击source进去保存代码，将其复制进 body标签里，这里面是我们所绘的路径信息。

通过css3设置动画关键帧，其中stroke-dashoffset是相对于绘制的起点偏移的量，正值(向右或者顺时针偏移)，负值(向左或者逆时针)

 <style>

    body {
        text-align: center;
    }
    
    @keyframes show {
        to {
            stroke-dashoffset: 0;
        }
    }
    
    @-webkit-keyframes show {
        to {
            stroke-dashoffset: 0;
        }
    }
</style>

4.在body标签里引入JavaScript结合css来实现我们想要的动画效果

 <script>
        var pathList = document.getElementsByTagName('path');
        var len = pathList.length;
        var delay = 0;
        for (var i = 0; i < len; i++) {
            var curLen = Math.round(pathList[i].getTotalLength());
            pathList[i].style.strokeDasharray = curLen;
            pathList[i].style.strokeDashoffset = curLen;
            pathList[i].style.webkitAnimation = 'show ' + curLen + 'ms linear ' + delay + 'ms forwards';
            delay += curLen;
        }
    </script>

我们将所有路径信息储存到pathlist这个数组里面，并且把这个数组长度赋给len变量，方便我们后续用for循环来遍历这个数组，来将所有的路径绘制完成。

这里我们需要关注的问题是我们如何控制一条路径画完之后再开始下一条路径的绘制，所以我们引入curLen变量来帮助我们，我们获取当前路径的长度并将其设置为动画时长，这样我们可以保证一条路径绘制完再开始下一条路径的绘制，

var curLen = Math.round(pathList[i].getTotalLength());
pathList[i].style.strokeDasharray = curLen;
pathList[i].style.strokeDashoffset = curLen;

我们这里将当前路径的的strokeDasharray和strokeDashoffset属性值都设置为路径长度，这是为了实现出动画效果。
strokeDasharray 这个属性是将路径以所设置的参数进行实线虚线的分割。
在这里插入图片描述
这个strokeDashoffset属性有点像是移动我们绘制的路径的操作并且当strokeDashoffset和strokeDasharray相等的时候路径就像是被隐藏了一样。
我们借助动画关键帧：

	 @keyframes show {
            to {
                stroke-dashoffset: 0;
            }
        }

来制作出由无到有的路径动画效果。
那么我们怎么确保下一段路径的绘制在当前路径之后呢？我们通过delay变量来储存上一段路径动画所需要的时间，并且通过delay += curLen;来保证每一段动画开始的时候之前的动画已经完成。
最后就是通过JavaScript 来为每一段路径设置它自己的动画属性值
pathList[i].style.webkitAnimation = 'show ' + curLen + 'ms linear ' + delay + 'ms forwards';
通过for循环的遍历来绘制出所有的路径。

当然Math.round属性（为保证路径长度不会因为四舍五入而不够用所以用Math.round向上取整）和Dom操作这里不加赘述。

Skrupellose

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用SVG制作名字画板

SVG关于SVGSVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。需要用到的：js ，动态地为元素添加样式；css3 ,我们需要css的动画属性；一个自动生成路径的在线网站：https://e...
复制链接

扫一扫