SVG path animation 实践

无意间看到了别人用SVG做的动画，那逼格时相当，忍不住就研究起了SVG。

它和CSS3结合起来，简直把html页面当成了画板。由于笔者对于SVG也是初出茅庐，文章方面一定会存在很多不足之处，希望多多指正，共同进步。

好了，别多话就不多说了。先看下效果动图

啥，看不清，没感觉。好吧，那点击下这个链接，看下它的运行效果

https://jsfiddle.net/wsy6566/jvzo61w2/28/

刚了解SVG动画没几天，做的比较粗糙。主要原理就是应用css3的animation对

stroke-dashoffset，stroke-dasharray 属性进行渲染。

strokedasharray属性用于创建虚线，可以设置多个值，进行间隔设置。stroke-dashoffset则是设定位置。

css部分如下：

    <style>
        #svg_dove {
            animation: goPoint 5s linear infinite;
            stroke-dashoffset: 14000;
            stroke-dasharray: 14000;
            stroke-width: 4;
        }

        #svg_12 {
            animation: goPoint 3s linear infinite;
            stroke-dashoffset: 1000;
            stroke-dasharray: 1300;
            stroke-width: 4;
        }

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

        #dove_f {
            position: absolute;
            top: 0px;
            right: 0px;
        }
    </style>

仅此而已。html部分只是两个svg标签。

闲话就说到这里，让我们一起进入进阶的学习吧

转载于:https://www.cnblogs.com/wsy6566/p/9242795.html