Question

我正在尝试仅使用矩形形状检测不同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中描述了一种解决方法。

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

1 个答案: