在鼠标事件中检测多个重叠的SVG形状元素

我试图检测不同的SVG元素在mouseup事件上的重叠，如仅在这个fiddle中使用矩形形状所示。在鼠标事件中检测多个重叠的SVG形状元素

$('svg').on('mouseup', function(evt) { 
    var root = $('svg')[0]; 
    var rpos = root.createSVGRect(); 
    rpos.x = evt.clientX; 
    rpos.y = evt.clientY; 
    rpos.width = rpos.height = 1; 
    var list = root.getIntersectionList(rpos, null); 

    for (var i = 0; i < list.length; i++) { 
    if (list[i] != evt.target) { 
     $(list[i]).mouseup(); 
    } 
    } 
});

我希望能够检测到的矩形之间的mouseup，圈以及如在此fiddle我一直想用，但使用getIntersectionList（多边形重叠）似乎只只矩形形状，其工作。

另一种方式似乎是获取mouseup上的根SVG坐标，并检查它是否与SVG元素内部的任何坐标匹配。

有没有更好的方法来检测mouseup上多个SVG元素形状的交集？

来源

2017-02-09 Yesin Singhawansa

当你说道十字路口时，你真的指的是光标下的哪些元素？ – Ian

@伊恩，是的。获取光标下的元素列表。 –

我知道Firefox不支持getIntersectionList()。我不确定Chrome或其他浏览器。

在this other question中描述了一种解决方法。

来源

2017-02-09 12:29:44

在鼠标事件中检测多个重叠的SVG形状元素

回答

相关问题