三种 Loading 制作方案

标签的width和height设置的是svg图形可显示区域大小。而viewBox表示的是截取图形的区域，因为矢量图的绘制区域可以是无限大的，具体绘制在哪里根据具体的设置而定
，比如上面的circle就绘制在圆心坐标为(25,25)，半径为20的圆形区域中，而viewBox设置为0 0 50 50，表示截图区域为左上角坐标为(0, 0)，右下角坐标为(50,50)的矩形区域内，即

会截取这个区域内的矢量图，然后将截取的矢量图放到svg的可显示区域内，同时会根据svg可显示区域的大小等比例进行缩放，但是截取的图片必须在svg可显示区域内完整显示。

假如，现在讲svg的大小设置为60px，如:

.loading-svg {
    width: 60px; /*设置svg显示区域大小*/
    height: 60px;
}

如上分析，viewBox截图区域中， 绘制的圆的圆心正好在截图区域的中心
，所以截图区域四周边框与绘制的圆之间有5px的距离，而圆的半径为20px，所以 比例为1:4
，现在将svg显示区域变为60px，所以也需要 将截图区域等比例放大并占满整个svg显示区域
，截图区域经过拉伸后， 圆心位置变为了(30,30)
，即半径变为了30，按1:4比例，半径变为24，外围变为了6，所以整个圆也会跟着变大。

需要注意的时候， 绘制的圆目前是看不到的
，因为 没有给画笔设置上颜色
，如:

.path {
    stroke: #409eff; /*给画笔设置一个颜色*/
    stroke-width: 2; /*设置线条的宽度*/
}

此时可以看到绘制出的圆环了。为了给圆环添加转动效果，我们需要绘制带缺口的圆环，后面通过改变缺口的位置大小来实现转动效果，如: