[HTML5-SVG]使用raphaeljs:代替css3实现qq空间关闭按钮旋转特效

之前写过一篇文章： css3实现qq空间相册关闭按钮转圈动画，用 css3实现非常简单，但是兼容性不好，只有chrome,safari5,opera11,firefox4以上才能支持，目前firefox正式版是3.6，还不支持这个效果。今天研究了一下 svg， svg主要是用来绘制矢量图形，找到一个很好的解决方案，可以解决所有 浏览器的兼容。 点击观看演示 首先需要载入javascript库

然后编写javascript，写法跟canvas有点类似，事件添加方法,动画和jquery类似

 
window.onload = function () {
	var paper = Raphael(0, 0, 26, 26);//在（0，0）的地方绘制26×26的画布
	var c=paper.image("http://www.zhouwenbin.com/wp-content/uploads/2011/01/close.png",0,0,26,26);//导入图片
	c.hover(function (event) {//添加鼠标经过事件
		this.animate({rotation:360}, 1000, "<>");//1秒内由慢到快到慢旋转360度，<>相当于ease-in-out
	}, function (event) {
		this.animate({rotation:0}, 1000, "<>");
	});
}

animate写法跟css3有点不同，跟jquery比较相似，具体的动画效果点击观看演示 完整代码如下，几行代码就实现了，svg非常的有潜力。