使用SVG制作热区图

前两大段都是闲侃，正文可从【准备工作】开始看

关于SVG

SVG(Scalable Vector Graphics)是可缩放 矢量图形 ，矢量图与常见的位图(bitmap)的区别就在于对图形的定义，位图是精确到每一个像素是什么颜色，而矢量图仅是对图形特征(比如一条直线的起点和终点)描述
因为位图其实是很多小方格拼在一起，将其放大后就能看到一个一个小像素点了，这也是为什么斜线会有锯齿了；而矢量图因为定义的图形特征，无论怎样缩放都能保证图形边缘的平滑准确
个人认为，位图可以表现出更复杂的图形，但是越高清(高分辨率)的图形自然也就越复杂，但是非常有层次感，很自然；而位图可以用一些特征去表现出一幅任意分辨率的图形，自然不适合去表达复杂的图像(比如一幅风景画)，而且通常很抽象，颜色是一块一块的，但是非常适合做扁平化设计(比如小图标什么的)，不仅节省了大量空间，更是不用担心锯齿虚化等问题了
编辑位图的工具有photoshop(ps)、画图等；编辑矢量图的工具有Adobe Illustrator(AI)，coreldraw等
而SVG就是W3C为网页矢量图所定制的标准，SVG的竞争对手为flash，可以断定SVG已经取代了flash的一些地位了

简短说明

因为需要做这么一个功能，在一张平面图上设置热区，用户可点击热区并可以执行相应操作
一开始用html的<area>标签实现，但是发现这个标签有太多不方便，比如没法使用hover伪类(网上提示说可以用onmousemove等事件+替换背景图来模拟hover效果)、没法自适应宽度(<area>标签需要精准的coords坐标)、<area>中的精确坐标很难确定(找到一个在线可视化制作热区的网站)等
综上，我想到我从未接触过的SVG，本来以为可以找到什么插件来完成的，但只找到Raphaël这个强大的矢量图形库，其实对我并没用…所以想将此次几乎是从零开始(至少还是接触过矢量图的)的经历记录下来

---

准备工作

• 一张平面图 - 随便在网上找吧(一张帅炸天的玛萨拉蒂)
  
• 矢量图编辑工具 - 我用的AI(Adobe Illustrator CC)
• jQuery - 一个百度静态资源库的CDN解决

处理图片

将图片拖入AI中，之后用钢笔或者尽量规则的路径勾勒出各个区域，下面列几个tips吧

• 需要调整画板大小，在标题栏的文档设置 -> 编辑画板
• 勾勒区域尽量减少锚点，这样存储的信息就越小，代码也就越少了
• 用小白箭头选取路径区域可以设置区域填充颜色、透明度、边框等

我勾出了前窗、侧窗、前轮、前灯和LOGO

之后保存格式为svg我们就得到了一个svg文件了，这个svg文件可以直接引入，但是我不这样做，因为不方便我控制样式(CSS)和脚本(JS)

放入HTML中

将svg文件中