前两大段都是闲侃,正文可从【准备工作】开始看
关于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文件可以直接引入ÿ