HTML5技巧：在网页上画一个渐变的椭圆
1、SVG。我们知道在HTML5当中，我们用来绘制图形的代码就是SVG，这个代码可以实现各种的图形绘制功能。我们先来定义一下这个SVG代码的属性。
svg width="100%" height="100%" version="1.1"
2、定义一下椭圆的渐变效果。
<linearGradient id="渐变椭圆" x1="0%" y1="0%" x2="0%" y2="50%">
3、定义一下这个渐变的过程。我们在这里设置了三重色的渐变。
<stop offset="0%" style="stop-color:#BDB76B;stop-opacity:1"/>
<stop offset="50%" style="stop-color:#8B6914;stop-opacity:1"/>
<stop offset="100%" style="stop-color:#CD0000;stop-opacity:1"/>
4、绘制出椭圆并填充一个渐变色。
<ellipse cx="300" cy="200" rx="90" ry="60"
style="fill:url(#渐变椭圆)"/>
5、放射性的渐变效果。
<defs>
<radialGradient id="渐变椭圆" cx="30%" cy="35%" r="40%" fx="60%" fy="20%">
<stop offset="0%" style="stop-color:#A2CD5A;stop-opacity:0"/>
<stop offset="100%" style="stop-color:#BDB76B;stop-opacity:1"/>
</radialGradient>
</defs>
6、新的水平渐变效果。
<defs>
<linearGradient id="渐变椭圆" x1="5%" y1="5%" x2="60%" y2="0%">
<stop offset="0%" style="stop-color:#8B2500;stop-opacity:1"/>
<stop offset="70%" style="stop-color:#0A0A0A;stop-opacity:1"/>
</linearGradient>
