SVG路径绘制动画原理分析

2019独角兽企业重金招聘Python工程师标准>>>

        本文内容为前端达人张鑫旭的文章《纯CSS实现帅气的SVG路径描边动画效果》的山寨版，山寨目的还是力求最简化原文，突出技术原理，便于自己学习，原文链点http://www.zhangxinxu.com/wordpress/?p=4089

        此技术可以实现类似下图效果：

点击此链点：http://htmldog.github.io/demo_html/2014/08/12/svg_stroke_animate.html

可以看到本人做的一个连笔画的svg路径动画的具体效果

实现类似上述效果，主要依靠svg路径的2个属性：

1、stroke-dasharray

2、stroke-dashoffset

这两个属性对svg中的：线条<line>、折线<polyline>、路径<path>都有效

stroke-dasharray：

        表示虚线描边，其值为固定长度值（也可以是百分百或者其他默认值）时，表示各个虚线段的长度，这个长度和虚线段之间的间隔也是相等的。

stroke-dashoffset：

        表示虚线的起始偏移，其值为固定长度值（也可以是百分百或者其他默认值）时，表示虚线向x轴负方向的位移。

---

1、stroke-dasharray是怎样改变svg路径的：

        当我们画一条线段路径名为MN，起始点为M,终点为N,当设置它的stroke-dasharray为10时，路径MN会变成虚线，且每小段虚线的长度为10px，虚线段之间的空白间隔也是10px。虚线的第一个小线段的起始点是M:

       蓝色框圈住的线段为参照系会一直保持不变，虚线则是线段MN设置了stroke-dasharray为10后的效果，红色框圈住的线段和绿色框圈住的空白间隙均为10px,并且红色框圈住的线段会一直保持在x轴0点的起始位置（在不设置stroke-dashoffset的情况下），增大stroke-dasharray的值，红色框圈住的线段会向x轴正方向继续变长，但0起点仍旧不会改变。原来的线段MN在变虚线之前的长度是240px,此时把stroke-dasharray的值逐渐变大到240，会发现下面的虚线最终似乎“还原”了，其实它是变成了一个更大的虚线而已，这个巨型虚线每个小线段的长度就是原来的整个MN线段的长度。你还可以继续增大stroke-dasharray，但是下方的线段不会再发生新的变化了，因为它只有240那么多料。

2、stroke-dashoffset是怎样改变svg路径的：

        上文的描述，stroke-dasharray增大到240时，最终结果变成这样：

        这回我们开始逐步增大stroke-dashoffset的值，你会发现下方的线段在往x轴负方向收缩，形如：

        当stroke-dashoffset的值为240时，下方的线段彻底没有了，形如：

---

        上述案例可以通过点击此链接自己尝试体验：

        http://htmldog.github.io/demo_html/2014/08/12/svg_stroke_animate.html#test

         看了stroke-dasharray和stroke-dashoffset的介绍，我们可以这样设想，如果我们在初始状态就设置stroke-dasharray和stroke-dashoffset为240，那么我们看到的就是空白（你可能回想，我只设置stroke-dashoffset为240让线段MN往负方向位移整条MN的长度不就可以实现全部隐藏MN了？为什么还要设置stroke-dasharray为240？这里如果只设置stroke-dashoffset为240肯定是无法达到隐藏整条线段MN目的，我的理解是线段MN与其说是线段，其实更像是直线，如果是直线的话，我们不管把它往负方向位移多远，它都不会改变或者消失，因为直线是无限长的，而stroke-dasharray的设置，则让直线MN变成了虚线，虚线有空白间隙，也就有了隐藏的可能）；如果在最终状态设置stroke-dashoffset为0，也就是负方向偏移为0，那么我们就能看到完整的路径线段MN,在这2个状态之间设置渐变动画，这就成了一个从无到有绘制线段MN的动画，设置2个状态的过度动画的任务可以交给Css3，stroke-dasharray和stroke-dashoffset可以作为css3的样式属性。以上就是SVG路径绘制动画的原理了。

        这里是拿最简单的直线路径来说明原理，stroke-dasharray和stroke-dashoffset其实还对其他复杂的路径：线条<line>、折线<polyline>、路径<path>都有效，不管什么路径，我们只要知道它的大体长度然后设置给stroke-dasharray和stroke-dashoffset就行了，复杂的路径无法准确估计其长度，stroke-dasharray和stroke-dashoffset就取值为一定大于原路径长度的值就行了。

        事实上，对于复杂的路径我们不太可能直接编码写出来，现在网上有现成的工具帮助我们生成路径源码,可以使用Google的svg-edit，这是网上的一个在线svg-edit:http://www.datadrafter.com/svg-edit-2.6/svg-editor.html,基本是一个在线绘图板，但是绘制的路径可以转换成path源代码。

转载于:https://my.oschina.net/710409599/blog/300318