好用的svg框架－Raphael
很多做项目的同学往往会遇到一些比较麻烦的需求，比如一些类似画图或者斜线之类的需求。每当pd满心欢喜的以为自己找到了一个良好的解决需求办法的交互的时候，就到了我们开发的同学纠结的时候。
比如如果要画一条斜线的时候，一般同学首先想的就是，我能不能切个图当背景呢，而比较有经验的同学会想到可以用两个dom的边框大小交叉出条斜线（这种办法非常变态，一般人不知道）。
但是这两种办法只能画出一条死的线，需要动态生成的时候，大家就傻眼了。当然，更高端的同学可能会用canvas。然而在天朝这种连ie6都健康存活的奇特国度，canvas显然不是最好的解决方案。
正所谓天无绝人之路，大不了不做了。当然这不是我写这篇文章的目的，我们还可以有另外的法宝，人家万维网联盟已经给我们想好了办法 ，那就是svg。
那么什么是svg呢？
什么是svg
正规的说明就是
可缩放矢量图形（Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。
当然像我这种语文是数学老师教的人来说，上面的话未免略显高深。作为一个前端，我暂且就把他理解成一些特殊的dom，有些标签展示出来是图形，然后属性可以控制他是方的还是圆的，控制他的位置、颜色等等。
原始的svg其实并不好用，不过幸好前端是一个人才辈出的职业，鼎鼎大名的大牛前端Dmitry Baranovskiy开发了一个好用的svg框架，就是高端洋气的Raphael.js。
Raphael能做什么
Raphael Javascript可以处理SVG、VML格式的矢量图。
它使用SVG W3C推荐标准和VML作为创建图形的基础，你可以用Javascript 操作Dom 很容易的创建出复杂的柱状图、走势图、曲线图等各种图表，可以画图，可以画出任意复杂度的图像，以及图表或图像裁剪和旋转等复杂操作。
同时它是跨浏览器的，完全支持 Internet Explorer 6.0+。 Raphael Javascript 目前支持的浏览器有：
- Firefox 3.0+
- Chrome 3.0+
- Safari 3.0+
- Opera 9.5+
- Internet Explorer 6.0+
下面我简单讲一下用法，详细的api以及用法，将在最后附上。
Raphael简单用法和代码
首先必须说在前面的是，Raphael框架是一个完全的面向对象编程的框架，所有的元素和方法都是以对象的形式调用的。
1.引用Raphael
当然第一步就是下载Raphael.js,并在项目中引用,链接在这里 Raphael.js。
2.新建一张画布
使用以下代码新建一个画布
var paper = Raphael(document.getElementById('svgPager'));svgPager是画布所处的位置的dom，会自动生成dom长宽的画布。 得到的paper是当前画布的对象，拥有很多方法，新建元素等都要通过该paper对象来生成。
3.新建一个元素（Element）
Element的理解，可以解释为一个dom，表现可以是为一个圆圈，一条线，或者一个文本的信息等。比如现在我需要一个圆圈：
var circle = paper.circle(5, 10, 15);得到的内容就是一个圆心在坐标（5，10），半径为15px的圆圈了。
4.元素的属性（Element.attr(…)）
Element.attr()。熟悉jquery的同学们一看就知道，这是为元素添加修改属性的方法，和jquery一样提供了key，value和json传入的方式接口。 Raphael提供的很多元素的属性，比如刚的circle对象，可以使用如下的方法：
circle.attr({“fill”: “#000”,“stroke”:“#fff”,‘fill-opacity’:0.4});上面传入了json的三个值，分别表示为 ＋ 1.圆圈填色为＃000000 ＋ 2.笔触颜色（即圆圈的border）为＃ffffff ＋ 3.圆圈的透明度为0.4
这里只列举了三个属性，更多属性可以自行查看api
5.动画对象－Animation
Animation是Raphael设定的一个动画的对象，想要执行这个对象对应的动画，element对象就要调用相应的动画对象。和jquery.animate()使用方式相仿，，比如：
var animIn = Raphael.animation({'fill-opacity':1}, 200);
var animOut = Raphael.animation({'fill-opacity':0.4}, 200);上面代码表示两个个Animation对象，功能分别是赋予一个元素在200毫秒内渐变为不透明和渐变为0.4的透明度。
6.Element的事件和animate的调用
正如前面讲过，svg可以和脚本很好的兼容，我们可以为一个Element元素定制多种事件，比如
circle.hover(function(){
this.animate(animIn);
},function(){
this.animate(animOut);
})
.click(function(){
alert('不要点我');
});这样我们就赋予了circle的hover事件和click事件，更多事件和方法请看api。
上面只是一个简单的例子，如果有兴趣深入了解Raphael，下面给出一些网站