用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>

 

最終效果：