初窥SVG

1.SVG描边动画

主要是利用SVG的stroke-dasharray和stroke-dashoffset来实现。
例如：
https://codepen.io/jianxiujiu...

2.SVG路径动画

利用路径offset-path让元素沿着不规则路径运动，offset-distance表示运动的距离。

.round{
    offset-path: path("M30.74,132.25c0,0,49-84,149-62s170,194,275,169s60-154,174-156s209,184,209,184");
}
@keyframes move {
    0% {
        offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}

https://codepen.io/jianxiujiu...

3.SVG任意形状动画

主要使用两个插件：TweenMax.min.js、MorphSVGPlugin.min.js

https://jianxiujiucan.github....