Raphael js toFront() 方法失真

Question

我只是在尝试用 raphael.js 生成交互式 svg 地图，我想要实现的有点像这个印度地图的例子，我从 wikimedia 下载的，JS fiddle working example ，一切都很顺利，但是当我悬停任何状态时，我无法弄清楚为什么“to.front()”会使地图变形。是因为 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) {...

或者将鼠标悬停在其他元素上？

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