Raphaël 是一个小型的 JavaScript 库,用来简化你在 Web 上显示矢量图的工作。你可以用它在页面上绘制各种图表、并进行图片的剪切、旋转等操作。
Raphaël ['ræfeɪəl] 使用 SVG W3C 推荐标准 和 VML 作为创建图形的基础。这意味着你创建的每一个图形对象同时也是一个 DOM 对象,因此你可以附加 JavaScript 事件处理程序或稍后对其进行修改。Raphaël 的目标是提供一个跨浏览器且简易的绘制矢量图形的适配器。
Raphaël 目前支持 Firefox 3.0+、Safari 3.0+、Chrome 5.0+、Opera 9.5+ 以及 Internet Explorer 6.0+。
VML(Vector Markup Language)是微软开发的技术,受 IE 5/6/7/8/9 支持,但在 IE 10 中已经过时,微软在 IE 9 中实现了 SVG (在低版本的 IE 中使用 SVG 需要安装 Adobe SVG Viewer,不过 Adobe 已于2009年1月1日起停止对 SVG Viewer 的支持)用以替代 VML。Raphaël 在 SVG 可用时使用 SVG,在 SVG 不可用时使用 VML。
// 在坐标(10,50)处创建 320 × 200 像素的画布
var paper = Raphael(10, 50, 320, 200);
// 在坐标(50,40)处创建一个半径 10 像素的圆
var circle = paper.circle(50, 40, 10);
// 设置 fill (填充)属性为红色(#f00)
circle.attr("fill", "#f00");
// 设置 stroke (描边)属性为白色(#fff)
circle.attr("stroke", "#fff");
演示效果:http://raphaeljs.com/pie.html
SVG 在各主要浏览器中的支持情况,详见:http://caniuse.com/#cats=SVG
参见:
- Raphaël 官网:http://raphaeljs.com