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

How to trigger mouseover event on stacked SVG elements

本文关键字：鼠标 事件 悬停 元素 SVG      更新时间：2023-09-26

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

SVGSVGElement（<svg>）上有一个名为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对此实现了部分支持，但目前似乎已被删除。

相关文章：