使用SVG实现gradient背景渐变

2. 点击线性渐变选项卡

3. 修改起止点坐标，使形成黄色至红色的渐变

4. 修改左下角边框大小为0

5. 选择左侧的矩形选项

6. 在白色面板上拖出个合适大小的矩形

7. 点击左上角长得像卫星的小图标就可以查看对应的SVG代码了

然后拷贝该XML标记代码转为svg文件，就大功告成了。
例如，您要查看上面演示的黄红渐变SVG文件可以狠狠地点击这里：黄红垂直渐变SVG
或者狠狠地点击这里：黄红垂直渐变SVG应用demo

另外， 点击左上角铅笔插菊花的标志，可以导入SVG进行编辑

IE9浏览器已经支持了SVG。现代浏览器最新的版本也是支持的。具体如下：

Chrome (从2010年5月)Firefox (从2011年3月)IE9 (从2010年3月测试版)Safari (从2010年6月)Opera (从2008年6月).四、SVG与线性渐变

上面演示过了，没什么好说的。您可以狠狠地点击这里：SVG与线性渐变测试demo

SVG代码如下：

于是乎，配合其他图片，我们就有类似下面的页面效果：


您可以狠狠地点击这里：SVG实现径向渐变demo

更赞的效果
效果如下：


您可以狠狠地点击这里：SVG实现曲线投影demo

SVG图片模样如下：


相关代码为：

<svg width="480" height="480" xmlns="http://www.w3.org/2000/svg"> <defs>  <filter id="svg_2_blur" x="-50%" y="-50%" width="200%" height="200%">   <feGaussianBlur stdDeviation="6"/>  </filter>  <linearGradient y2="0.8" x2="1" y1="0" x1="0" id="svg_6">   <stop stop-color="#ffffff" offset="0"/>   <stop stop-color="#eeeeee" offset="0.45"/>   <stop stop-color="#ffffff" offset="0.5"/>   <stop stop-color="#eeeeee" offset="0.55"/>   <stop stop-color="#ffffff" offset="1"/>  </linearGradient> </defs> <g>  <title>Layer 1</title>  <path fill="#000000" stroke="#000000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" d="m24.81929,21.20483l-21.20483,214.93975l15.66265,224.09642l220.48192,12.04813l215.66266,-13.25299l15.66263,-219.2771l-15.66257,-220.48191l-219.27718,-12.04819l-211.3253,13.97591l0.00001,-0.00001z" id="svg_2" opacity="0.32" filter="url(#svg_2_blur)"/>  <rect id="svg_5" height="448.00001" width="444.99998" y="10" x="13.00002" stroke-opacity="0.8" stroke-linecap="null" stroke-linejoin="null" stroke="#d3d0c9" fill="url(#svg_6)"/> </g></svg>

三、SVG总结

如果我们要实现单层的线性渐变或是径向渐变，CSS3当是首选。当我们要实现一些复杂的多层效果的时候，这时显然需要借助于强大的SVG背景了。我们可以在SVG创建编辑器上编辑出我们想要的效果，然后拷贝其生成代码，然后，一切就松松的了。

基本上，photoshop可以创造出来的各种效果，SVG都能实现，这玩意，超强的。可惜，IE6~8浏览器不支持（需要装Chrome框架才可以）。得，可能还要等些时日。

参考文章：A Farewell to CSS3 Gradients

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=1957

（本篇完）

相关文章CSS渐变图片背景下高度亦自适应按钮 (0.375)基于canvas画布的两个炫酷效果展示 (0.375)PIE使IE支持CSS3圆角盒阴影与渐变渲染 (0.322)拾人牙慧 - CSS3实现Opera浏览器的logo (0.322)CSS3+js实现多彩炫酷旋转圆环时钟效果 (0.322)CSS页面重构“鑫三无准则”之“无图片”准则 (0.322)SVG特征、支持以及一些实际使用问题 (0.322)CSS实现兼容性的渐变、高光等文字效果 (0.303)JavaScript实现最简单的拖拽效果 (0.303)了解：使用CSS namespace进行分隔 (0.303)CSS渐变之CSS3 gradient在Firefox3.6下的使用 (RANDOM - 0.020)