Question

我只是尝试使用raphael.js生成交互式svg地图，我希望实现的有点像印度地图的这个例子，我从维基媒体上下载JS fiddle working example ，一切都很顺利，但我无法弄清楚为什么＆＃34; to.front（）＆＃34;当我悬停任何状态时，会使地图失真。是因为SVg错误还是与我的代码有关

MY problamatic fiddle , distorted on hover

这是我的一点代码

regions[i].mouseover(function (e) {
        this.node.style.fill = 'grey';
        //this.glow({ color: "#555", width: 10 });
        //document.getElementById('region-name').innerHTML = this.data('region');
        this.toFront();
        this.attr({
            cursor: 'pointer',
            fill: '#990000',
            stroke: '#fff',
                'stroke-width': '2'
        });
    });

Answer 1

toFront（）方法不会扭曲任何东西。

发生的事情是底层的“区域”是这样的，只是其他东西与它重叠。如果你删除其他东西，你会得到像......

region jsfiddle

你真的想要......

regions[i].mouseover(function (e) {...

还是将鼠标悬停在其他元素上？

所以它正是应该做的。如果您不希望发生这种情况，则需要将处理程序不附加到区域，而是将您希望它发生的元素。或者创建匹配的不同区域路径。

Raphael js toFront（）方法扭曲了

1 个答案: