SVG和鼠标悬停

Question

我是JS的新手，并使用Raphael将SVG转换为JS。我试图用多个路径和圆圈上的鼠标悬停效果制作美国的交互式地图。

我将状态作为具有父变量的变量，并将我所访问的城市视为具有父变量的变量。这是我的JS的片段：

var states = rsr.set();

var connecticut = rsr.path("M877.198,184.1l-0.6-4.2l-0.8-4.4l-1.602-6L870,170.4l-21.802,4.8l0.602,3.3l1.5,7.3v8.102   l-1.102,2.3l1.802,2.101l5-3.399l3.6-3.2l1.9-2.1l0.8,0.6l2.7-1.5l5.198-1.1L877.198,184.1z").attr({fill: '#D3D3D3','stroke-width': '0','stroke-opacity': '1'});
connecticut.node.id = 'Connecticut';
states.push(connecticut);


var cities = rsr.set();

var losAngeles = rsr.circle(87, 349, 5).attr({fill: '#3F3F3F','stroke-width': '0','stroke-opacity': '1'});
cities.push(losAngeles);

我无法在状态和城市上创建鼠标悬停效果。我认为它可能与z-index有关？

到目前为止，我已经为循环编写了这些内容，但一次只能使用一个。

for (var i = 0; i <= states.length; i++) {
    states[i].mouseover(function() {
        this.animate({
            fill: '#fff',
            transform: 's1.05'
            }, 200);
    });
    states[i].mouseout(function() {
        this.animate({
            fill: '#D3D3D3',
            transform: 's1'
            }, 200);
    });
}

for (var i = 0; i <= cities.length; i++) {
    cities[i].mouseover(function() {
        this.animate({
            r : 10,
        }, 200);
    });
    cities[i].mouseout(function() {
        this.animate({
            r : 5,
        }, 200);
    });
}

我尝试过使用toFront（）;和toBack（）;仍然无法让它发挥作用。有什么建议吗？