如何设计动效图——前端SVG JavaScript库Raphaël介绍

一、Raphaël趣味介绍

1.1 Raphaël名字的缘由

Raphaël读音为 ['ræfeɪəl]，译音为拉斐尔，为什么一个前端图库取名为此，查了资料拉斐尔被称为文艺复兴三杰之一，和达.芬奇、米开朗基罗齐名，他的画让神从天堂走进了人间，给当时战乱的欧洲带来了光明。因此用此人名取名实在是巧妙啊。

1.2 Raphaël的功能

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个模块。各模块的功能及接口数、属性数如下。

三、Raphaël的使用

3.1 SVG基本语法

图形基础的形状无非是线面体，再复杂的图形都是由这几种基本图形构成。

path标签最为强大，借助它可以绘制任意图形。

其中样式可以是stroke、stroke-width、fill、fill-rule，用style作为key，每一个也可以单独作为属性。

3.2 指南针的实现

基于Vue框架实现，传入角度即可完成展示，效果如图所示。需要源码请私信。