与RaphaelJS制作互动的等值线图

Question

我刚刚开始的地图项目遇到了麻烦。

我想用RaphaelJS制作一张互动地图。从shapefile转换后，我从QGIS导入了我的地图SVG。在Ready Set Raphael（http://jsfiddle.net/allankiezel/FJrNN/）上使用这个例子中的一些代码，当鼠标在RaphaelJS库中使用mouseover（）方法将鼠标悬停在它们上面时，我试图让省份出现在前面。

完整的代码在JSfiddle上，因为它太长而无法放在这里：http://jsfiddle.net/siyafrica/nCL25/

var rsr = Raphael('rsr', '612', '792');

var SouthAfrica = rsr.set();
SouthAfrica.attr({'id': 'South-Africa','name': 'SouthAfrica'});

var easterncape = rsr.set(); ...

var len = rsrGroups.length;
    for(i = 0, i <= len, i++) {
       var el = rsrGroups[i];
el.mouseover(function() {
    this.animate({
            scale: '1.05'
        }, 200);
});
    }; 

我在使用OS X的Macbook Pro上运行它。

我希望有人可以提供帮助。我认为解决方法很简单，但我一直在绞尽脑汁试图找到它。