如何在堆叠的 SVG 元素上触发鼠标悬停事件

Question

虽然 CSS 标签 pointer-events:none 将使 SVG 元素不会成为鼠标事件的目标，但只有一个堆叠元素可以成为事件的目标。是否有一种简单的方法可以使鼠标事件针对光标下的所有元素，以便如果事件发生在其边界框内，则一组堆叠的元素都将触发其事件？

Answer 1

<svg>SVGSVGElement ( )上有一个方法getIntersectionList()，该方法将返回与给定矩形相交的所有元素。

例如，下面是一个代码片段，它将为点击下的每个 SVG 形状赋予随机颜色。

var  mysvg = document.getElementById("mysvg");

mysvg.addEventListener('click', function(evt) {

  var  hitRect = mysvg.createSVGRect();
  hitRect.x = evt.clientX;
  hitRect.y = evt.clientY;
  // (leave width & height as 0)
  
  var  elems = mysvg.getIntersectionList(hitRect, null);
  for (i=0; i<elems.length; i++) {
    // Give each element under the mouse a random fill colour
    elems.item(i).setAttribute('fill', "rgb("+rnd()+","+rnd()+","+rnd()+")");
  }
  
});


function rnd() {
  return Math.floor(Math.random() * 255.99);
}

<svg id="mysvg">
  
  <rect width="150" height="100" fill="#393"/>
  <rect x="120" y="20" width="140" height="130" fill="orange"/>
  <rect x="220" y="0" width="80" height="130" fill="red"/>
  
</svg>

不幸的是，目前这仅适用于 Chrome（也许 Safari 也适用？）。据说FF对此实现了部分支持，但目前似乎已被删除。