javascript - Raphael js toFront() 方法扭曲

Question

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

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

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