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

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

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

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

浏览器Radial CSSLinear CSSFirefox-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是矢量的，所以怎么放大缩小都不会变形，可以用来代替多张图片。 点击观看演示：点此查看