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
