用svg写个圆环loading动画

今天来学习下用svg画个圆环进度条，效果模仿QQ登录时候的loading

图片描述

通过观察可以发现，这个进度条大部分是实线，最后一小段是个逐渐消失的线段。所以，我们可以把这个进度条分成两个path实现，消失那段用渐变效果。

我们的圆环画在一个200x200的坐标系内（因为要加上线条2px宽度，所以是204，刚画的时候可以把宽度设置大一点，容易观察些），圆的半径为100，用transform="translate(100,100)"把坐标中心移到中间位置可以方便计算。

画圆弧主要是是确定起始点坐标，利用简单几何学就可以得到。这里图简单，先画一个左半圆，再从底端开始画一个1/4圆，得到的坐标都可以容易算到。

这样各个端点的的坐标是0,-100,0,100，0,100,100,0，渐变效果那段先随便用个颜色。

接下来定义渐变，并应用到path中。

然后用animateTransform加上旋转效果

Σ(っ°Д°;)っ，前面埋了个坑，用了translate，现在给transform加了rotate，translate就被重置了，折腾了好久，最后加了个g元素，用2个animateTransform搞定。

还没来得及高兴，打开控制台一看，出现一条警告

⚠️ SVG's SMIL animations (<animate>, <set>, etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.

日了鹅，白折腾，最后还是要配合CSS3动画