首先说明：由于各浏览器对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>
最终效果：
