说起Raphael，可是老早就听说了，不过前些年和EXTJS合并后好像不怎么更新了，好在组件没什么bug，更新或不更新都阻拦不了我们兼容IE9以下浏览器的脚步。废话完毕，下面先简单介绍下我们的主角——Raphael

Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库。它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础，你可以通过 JavaScript 操作 DOM 来轻松创建出各种复杂的柱状图、饼图、曲线图等各种图表，还可以绘制任意形状的图形，可以进行图表或图像的裁剪和旋转等复杂操作。正因Raphael对VML的强力支持，使得在IE9以下版本，目前支持的浏览器包括： Firefox 3.0+，Safari 3.0+，Chrome 5.0+，Opera 9.5+ 以及 Internet Explorer 6.0+，实际测试中，甚至IE5都能够实现我们想要的图形、动画效果。

下面展示下Raphael的简介操作，假设页面有一div容器，id为chart，我们可以这样写：

var paper=new Raphael(document.getElementById(“chart”),1000,500);

这样就创建了画布；

var rect=paper.rect(150,150,150,150);

可以这样创建矩形；

var circle=paper.circle(150,150,150);

可以这样创建圆；

var path=paper.path(“M0,0L150,150L300,300Z”);

也可以这样绘制任意图形，每一次创建图形后，就会自动插入到页面内部。上面简单列Raphael还有很多特性，如Set、Animation等，这里不再一一介绍，有兴趣的童鞋可以自己去官网看下，虽然文档不是很全，但对于专业的你，应该已经足够了。

官网地址是：http://raphaeljs.com/

大概讲了下Raphael的方便，不免再啰嗦下其不爽之处，最近又遇奇葩需求，鉴于多年经验没见过类似图表，无奈之下，自己拿Raphael绘制，兼容性良好，一切基本元素就绪，可当我想加动画效果时发现，我所绘制的多个元件组成的图，不能很好的实现动画效果，主要是因为Raphael不支持Group元素（g标签），这使得我不得不想办法大规模的改动组件，尽量将小元件绘制到一个path中，以此来保证动画的流程度。另外一点就是，在使用text标签时发现，Raphael在每个创建好的text标签下面加一tspan来控制文本，如果使用\n，Raphael则会计算好高度，默认在text内部增加多个tspan，但这对于我们奇葩需求又不好用了，我想保证我文本元件在一起的同时，还想控制内部多个tspan样式差异，比如三个tspan字体大小、颜色不同，这点Raphael没有很好的API控制。对于没有group的问题，不知道其原因，期间也在网上找过增加group的插件，因为要兼容ie8，效果都不理想，最终放弃，对于text样式的控制，只好插入页面后人为通过js操作其属性来达到要求了。

就简单介绍到这了，小小透露下，目前小子正在着手实现Raphael的分组功能，因为Raphael扩展接口的方式支持有限，目前思路是修改Raphael源代码增加特殊Element，以实现group效果，目前测试svg下良好，可以使用所有Element属性，包括animate，但是IE8下使用VML的情况，暂未测试完毕，大家可以期待哦，如果完成，后续会放出修改后的代码给大家使用哦。