前端绘制动画（svg）

如何优雅嵌入动画到前端页面？
通常情况下，对于一些简单的有规则的图形，可以使用css直接编写图形，给这个元素添加动画规则即可（可参考文章3d转动正方体）。
但是当要给一个比较复杂的矢量图形添加动画时，以上方法显然是不可行的。

便捷方法：将要添加动画的图标转化成svg格式，打开svg文件，复制svg代码到你的项目中来。（以下是我使用svg在线编辑器绘制的图形）

<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
            <g>
            <title>Layer 1</title>
            <ellipse  fill="#729C62" ry="23" rx="134.5" id="svg_3" cy="314.5" cx="227.5"/>
            <path class="anim" id="svg_6" d="m227.32284,232.04589c-3.77612,-7.45046 -8.39594,-13.48238 -13.02995,-17.70195c-5.40716,4.32508 -11.99278,6.95873 -19.17239,6.95873c-7.19371,0 -13.7888,-2.63878 -19.18643,-6.95873c-4.63399,4.21956 -9.25853,10.25149 -13.04392,17.70195c-8.78721,17.29783 -9.75359,35.04099 -2.1639,39.64155c3.39898,2.07241 6.96277,0.52775 10.64456,-3.34685c-0.64584,3.92861 -1.02299,8.18671 -1.02299,12.64057c0,19.78735 7.03825,35.81593 15.71214,35.81593c5.22804,0 7.81608,-5.83637 9.06055,-14.77228c1.23988,8.93592 3.82789,14.77228 9.03699,14.77228c8.68814,0 15.72646,-16.02858 15.72646,-35.81593c0,-4.45386 -0.37728,-8.71196 -1.03715,-12.64057c3.69114,3.87461 7.25023,5.41926 10.65865,3.34685c7.58502,-4.60056 6.60437,-22.34373 -2.1826,-39.64155l-0.00001,0zm-32.21161,-17.49343c14.59483,0 26.432,-12.92889 26.432,-28.87766s-11.83717,-28.87769 -26.432,-28.87769c-14.5998,0 -26.44631,12.93147 -26.44631,28.87769s11.84652,28.87766 26.44631,28.87766z" stroke="#000" fill="#fff"/>
            </g>
</svg>

假如此时给小人添加动画，给path添加类名‘anim’，此时可以直接编辑代码根据需求添加动画

.anim {
    animation: lineMove 3s ease-out infinite;
    stroke-width:1;
    stroke:#729C62;
}

@keyframes lineMove {
    0% {
        stroke-dasharray: 0, 378;
    }
    50% {
        stroke-dasharray: 378, 378;
        fill: rgba(0, 0, 0, 0);
        opacity: 1;
    }
    80% {
        stroke-dasharray: 378, 378;
        fill: #729C62df;
        opacity: 1;
    }
    100% {
        stroke-dasharray: 378, 378;
        fill: rgba(255, 119, 0, .5);
        opacity: 0;
    }
}

效果图：