svg描边绘制动画实现方式

0写在前面

这篇文章主要讲利用SVG来实现web页面上的描边绘制动画的两种原理。同时涉及到从AI软件导出SVG的方法。

1案例效果

扫光效果和描边效果，如图：

2SVG的导出方法

首页需要设计师做一个相同或者等比文字矢量图，也就是AI文件。

用AI打开文件之后利用左侧工具栏里的“直接选择工具”，全选之后右击“转化成复合路径”，然后菜单里选择“将文档存储为SVG”。

这样导出来的就是path路径代码了。如图所示：

举例：

导出之后的代码片段，比如案例“hello”代码片段里有些属性是AI软件自动生成的，我们可以提取到CSS里调用。

简化之后的SVG代码片段为：

 CSS代码片段：

当然边框颜色可以随心所欲的更改喽！

这样SVG的路径导出过程就已经完成了，下一步就可以利用CSS编写样式和动画效果了。

3动画实现的两种原理

在这里我们需要运用：

stroke-dashoffset和stroke-dasharray两个属性： stroke-dashoffset属性是指虚线的起始偏移量。 stroke-dashoffset说明

stroke-dasharray属性指虚线段的样式（实线段长度、间隔段长度） stroke-dasharray说明

这个两种原理呢。

也就是利用CSS改变stroke-dashoffset或者stroke-dasharray，即一种是虚线线段不变的情况下改变偏移量，另一种是偏移量不变的情况下改变虚线线段长度。

通过下面两张gif图就能看出两个属性的区别了。

stroke-dashoffset

stroke-dasharray

原理一、通过改变stroke-dashoffset

css代码片段：

原理二、通过改变stroke-dasharray

css代码片段：

获取路径的长度方法

最后这里需要说明一下css代码片段。

其中“633”为实例中“hello”路径的长度，通过document.querySelectorAll("path")[xxxxxxxxxx].getTotalLength()可以获取路径长度。

-------------------------------------------------------

通过这两种原理，通过结合CSS3动画就能做出炫酷的扫光效果了，让slogen焕发光彩！

技术文章结束啦，轻松一刻，小编送上！

可爱的宋民国，希望大家多多关注我们呦！

扫码下方二维码，

随时关注更多前端干货文章！

▼

微信：IMWebTech