用svg制做loading动画

　　首先说明：因为各浏览器对svg动画事件支持不统一，此loading动画在Firefox，Opera，Chrome中均没有问题，IE和Safari中有问题，多是不支持SIML写动画的语法，

可是用Canvas写的话，在颜色的渐变方面会有问题：

　　线性渐变须要传递四个参数

　　xstart:渐变开始点x坐标

      ystart:渐变开始点y坐标

      xEnd:渐变结束点x坐标

      yEnd:渐变结束点y坐标

　　这样画出来的渐变只能用于矩形之类的图形，没法应用在诸如扇形内，此loading是圆形的不能使用放射渐变，要在圆形的区域内实现相似线性渐变的效果，只能一个点一个点的画(若有更好办法，请指教)

　　能够参考：https://gist.github.com/bebraw/504568

　　废话很少说直接上代码：

　　图片资源：

　　　　

　　样式：

 1 <style type="text/css">
 2         .loadingsvg-out
 3         { 
 4              width:72px;
 5              height:72px;
 6              margin:0 auto;
 7              position:fixed;
 8              top:50%;
 9              margin-top:-51px;
10              left:50%;
11              margin-left:-51px;
12          }
13 </style>    

 

HTML代码：

　　　　<div class="loadingsvg-out">
            <svg width="72px" height="72px" viewBox="0 0 72 72" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <!--<circle id="circleLoading" cx="35" cy="35" r="34" stroke="Green" fill="white" stroke-width="1"></circle>-->
                <!--<circle cx="35" cy="35" r="21" stroke="Transparent" fill="white" stroke-width="1"></circle>-->
                <g transform="translate(35,35)">
                    <path id="loadingPath" d="M -20 28 A 35 35,0,0,0,35 0 L 0 0 Z">
                        <animateTransform
                            attributeType="xml"
                            attributeName="transform" type="rotate"
                            from="0" to="360"
                            begin="0" dur="0.8s"
                            fill="freeze"
                            repeatCount="indefinite"
                          />
                    </path>
                </g>
                <image xlink:href="../images/gototop1.png" x="0" y="0" width="70px" height="70px"/>
                <defs>
                    <linearGradient id="loadingGradient">  
                        <stop class="stop1" offset="0%"/>  
                        <stop class="stop2" offset="50%"/>  
                        <stop class="stop3" offset="100%"/>
                    </linearGradient>
                    <style type="text/css">
                        #loadingPath{fill:url(#loadingGradient);}
                        .stop1 { stop-color: #118F2C;stop-opacity: 0.8;  }  
                        .stop2 { stop-color: #93D701; stop-opacity: 1; }  
                        .stop3 { stop-color: #fff; }
                    </style>
                </defs>
            </svg>
        </div>

 

最终效果：