一、Raphaël趣味介绍
1.1 Raphaël名字的缘由
Raphaël读音为 ['ræfeɪəl]，译音为拉斐尔，为什么一个前端图库取名为此，查了资料拉斐尔被称为文艺复兴三杰之一，和达.芬奇、米开朗基罗齐名，他的画让神从天堂走进了人间，给当时战乱的欧洲带来了光明。因此用此人名取名实在是巧妙啊。
1.2 Raphaël的功能
该库以W3C推荐的SVG标准和VML语言为基础绘图，意味着每一个图形都是一个DOM对象，即<svg>元素，因此可以对其绑定js事件以及修改该元素。该库的目标是提供一个绘制矢量图的适配器，能够更好且适宜地兼容各种浏览器。
目前兼容的浏览器有：
浏览器及版本
- Firefox 3.0+
- Safari 3.0+
- Chrome 5.0+
- Opera 9.5+
- Internet Explorer 6.0
1.3 霸气的Demo
下图是利用该库绘制的虎头，官网Demo链接在此，可以对此任意放大而不失真。
此外在其首页展示了28个示例，足以见识其强大。
二、Raphaël的API
我研读了Raphaël所有的接口，很直观且简单，使用人员能够快速上手。接口共计分为7个模块。各模块的功能及接口数、属性数如下。
| 模块 | 功能 | 接口数 | 属性数 |
| Animation | 创建并开始动画 | 2 | 0 |
| Element | SVG元素实践及操作方法 | 54 | 6 |
| Matrix | 矩阵操作，工具类 | 10 | 0 |
| Paper | 画布 | 20 | 4 |
| Raphael | 主类，根据元素创建画布并进行绘制 | 32 | 7 |
| Set | 元素集合类，增删改查 | 6 | 0 |
| eve | 事件类，事件监听、启动以及停止 | 6 | 1 |
三、Raphaël的使用
3.1 SVG基本语法
图形基础的形状无非是线面体，再复杂的图形都是由这几种基本图形构成。
| 标签 | 名称 | 属性 |
| svg | 图形 | width、height、viewbox |
| line | 直线 | x1、y1、x2、y2 |
| polyline | 曲线 | points |
| rect | 矩形 | x、y、rx、ry |
| circle | 圆形 | cx、cy、r |
| ellipse | 椭圆形 | cx、cy、rx、ry |
| pology | 多边形 | points |
| path | 路径 | d |
其中样式可以是stroke、stroke-width、fill、fill-rule，用style作为key，每一个也可以单独作为属性。
3.2 指南针的实现
基于Vue框架实现，传入角度即可完成展示，效果如图所示。需要源码请私信。
