javascript - 检测鼠标事件上的多个重叠 SVG 形状元素

Question

我正在尝试检测 mouseup 事件上不同 SVG 元素的重叠，如 fiddle 所示仅使用矩形形状。

$('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();
    }
  }
});

我希望能够检测矩形、圆形以及多边形形状之间鼠标按下时的重叠，如fiddle我一直在尝试，但使用 getIntersectionList() 似乎只适用于矩形形状。

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

是否有更好的方法可以检测 mouseup 上多个 SVG 元素形状的交集？

Answer 1

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

this other question 中描述了解决方法。 .