[HTML5-SVG]使用raphaeljs:代替css3绘制opera图标效果

之前的文章：css3绘制opera图形+倒影，用css3实现兼容性并不好，opera，ie均不支持渐变。上次使用svg代替css3实现qq空间关闭按钮旋转特效，发现svg用来绘图是个不错的选择，结合raphael库实现浏览器的兼容，不支持svg的浏览器会换成vml绘制。这次用这个方案来绘制opera的图形同样实现了所有浏览器的兼容。点击观看演示
实现方法如下，首先导入raphael库

<script src="raphael-min.js" type="text/javascript" charset="utf-8"></script>

然后编写javascript

window.onload = function () {
	var paper = Raphael(0,0, 600, 600);//新建600×600的画布
	var o = paper.ellipse(150, 175, 150, 175);//在（150，175）处绘制短半径150，长半径175的椭圆
	o.attr({fill: "270-#fff-#f00:80-#000"});//偏转270度由白到红到黑的渐变填充
	var m = paper.ellipse(150, 175, 77, 158);
	m.attr({fill:"#a30000"});//暗红色填充
	var i = paper.ellipse(150, 175, 72, 153);
	i.attr({fill:"#fff"});				
}