1.背景：
为了更加直观的显示仓库系统中某个仓库中货架的库存情况，需要用平面图来展示，（需要动态文字，动态效果，比如点击事件等），尼玛，还居然不是很有规则。大小不一等，于是纠结起来...
2.传统的做法
label 绝对定位。但是这样往往做起来比较苦逼,遇到规则的还好，遇到不规则的就玩蛋去了。。。
3.创新做法
热区+svg 技术。下面开始一一分析
1.热区，大家都应该了解，使用DW就可以很容易的画出来、（蓝色区就是热区）
2.svg
什么是SVG？(详细看w3c介绍)
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用来定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
- SVG 是万维网联盟的标准
- SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
svg 可以帮助我们很容易的画图，利用x y定位。
4.上面，利用热区，我们在dom页面上发现生成了很多
上面的coords就是x,y坐标，那么有了这个，我们还不容易操作吗？
5.那么我们就开始用svg吧
svg是前端工具，那么有没有比较好的svg js库呢，有了。推荐使用Raphael
var paper = Raphael(0, 0, 900, 500); //创建画图
var areas = $('area'); //获取热区
$.ajax({
type: 'post',
data: { rows: 1000, page: 1 },
url: 'a.xml',
dataType: 'json',
success: function (data) {
var rows = data.rows;
$.each(areas, function (index, item) {
var xy = $(item).attr('coords').split(','); //获取坐标
paper.rect(parseInt(xy[0]), parseInt(xy[1]), parseInt(xy[2]) - parseInt(xy[0]), parseInt(xy[3]) - parseInt(xy[1])) //创建矩形
.attr({ fill: '#fff', 'cursor': 'pointer', 'stroke-width': 0 })
.data("i", (index + 1))
.mouseover(function () { //移入事件
this.attr({ fill: '#ecda3b', "stroke-opacity": 0.5, 'stroke-width': 0 });
})
.mouseout(function () { //移出事件
this.attr({ fill: '#fff', 'stroke-width': 0 });
})
.click(function () { //点击事件
_self._infoAction('B' + $('.typeid').text() + '-' + this.data("i"));
});
paper.text(parseInt(xy[2])-10, parseInt(xy[3]) -5, 'B' + $('.typeid').text() + '-' + (index + 1)).attr({ 'font-size': 9 }); //创建描述
});
最后，就完成了。见下面效果
