标签：des style http color 使用 width
首先说明：由于各浏览器对svg动画事件支持不统一，此loading动画在Firefox，Opera，Chrome中均没有问题，IE和Safari中有问题，可能是不支持SIML写动画的语法，
但是用Canvas写的话，在颜色的渐变方面会有问题：
线性渐变需要传递四个参数
xstart:渐变开始点x坐标
ystart:渐变开始点y坐标
xEnd:渐变结束点x坐标
yEnd:渐变结束点y坐标
这样画出来的渐变只能用于矩形之类的图形，无法应用在诸如扇形内，此loading是圆形的不能使用放射渐变，要在圆形的区域内实现类似线性渐变的效果，只能一个点一个点的画
(如有更好办法，请指教)
可以参考：
https://gist.github.com/bebraw/504568
废话不多说直接上代码：
图片资源：
样式：
<style type="text/css">
.loadingsvg-out
{ width:72px;height:72px;margin:0 auto;position:fixed;top:50%;margin-top:-51px;left:50%;margin-left:-51px;}
</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>
最终效果：
用svg制作loading动画,布布扣,bubuko.com
标签：des style http color 使用 width
原文地址：http://www.cnblogs.com/xu-gang/p/3822393.html
