svg动画之动态描边效果

1、首先先做一个简单的线一点一点画出来的效果，主要使用svg中的“strokeDasharray”、“strokeDashoffset”属性，通过css3中的transtion改变strokeDashoffset来实现动画。

注：path中的数据通过在ai中划线后存储为svg格式就可以拿到；

效果图：

代码如下：

2、与画线的效果，接下来用同样的原理来画一个“蓝胖子”，蓝胖子同样是需要用ai画出来，将所有的元素存在数组里面遍历时改变transtion中的during和delay从而实现划线的先后顺序。

效果图：

代码如下：

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！