[HTML5-SVG]使用svg代替css3实现渐变

ie9不支持渐变，但是支持border-radius和box-shadow，所以在之前的小博客我都是用纯色代替渐变

但是有没有办法让ie9也支持渐变，也许大多数人会想到滤镜，但是滤镜会消耗性能，而且圆角会没有效果，所以不推荐使用。

有没有比css3更合适的方案呢？先看看各浏览器对css3的支持情况

浏览器	Radial CSS	Linear CSS
Firefox	-moz-radial-gradient( 500px 25%, circle, blue 20px, #eef 40px );	-moz-linear-gradient(top, #444444, #999999);)
Chrome 11, Safari 5	-webkit-radial-gradient(#cde6f9, #81a8cb);	-webkit-linear-gradient(top, #444444, #999999);)
Chrome	-webkit-gradient( radial, 500 25%, 20, 500 25%, 40, from(blue), to(#eef) );	-webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
Opera 11	不支持	-o-linear-gradient(top, #444444, #999999);)
Opera 10–	不支持	不支持
IE10 beta	-ms-radial-gradient(top center, circle cover,             orange, yellow 25px, turquoise)	-ms-linear-gradient(30deg, orange, yellow 50%, turquoise);
IE9	不支持	不支持
IE8	不支持	-ms-filter: "progid:DXImageTransform.Microsoft.gradient( la la la...
IE5-​​7	不支持	filter: progid:DXImageTransform.Microsoft.gradient(la la la..

svg的支持情况

• Chrome (since May 2010)
• Firefox (March 2011)
• IE9 (March 2010 beta)
• Safari (June 2010)
• Opera (June 2008).

由此可以看出现代浏览器对svg渐变的支持比css3渐变来的好，而且现在css3的渐变需要添加浏览器前缀，webkit早期版本的语法又和现在的不同，所以要兼容android和ios还需要写早期的版本，所以一个渐变需要写一长串的代码

#wmdqq .left,#dslxs .left{

background: -webkit-gradient(linear, left top, left bottom, from(#f1fe85), to(#fff));
background: -webkit-linear-gradient(#f1fe85, #fff);
background: -moz-linear-gradient(#f1fe85, #fff);
background: -ms-linear-gradient(#f1fe85, #fff);
background: -o-linear-gradient(#f1fe85, #fff);
background: linear-gradient(#f1fe85, #fff);
} 

而svg实现的代码如下

代码少了，而且兼容性也变好了，现在ie9也支持了，对于不支持svg的ie6，7，8，我使用png32图片替代，效果如下图所示

图片大小为1.34k，svg大小为329字节，而且svg是矢量的，所以怎么放大缩小都不会变形，可以用来代替多张图片。 点击观看演示：点此查看