Question

虽然CSS标记指针 - events：none将使SVG元素不是鼠标事件的目标，但只有一个堆叠元素可以成为事件的目标。是否有一种简单的方法可以使鼠标事件以光标下的所有元素为目标，这样，如果事件发生在边界框内，一堆堆叠的元素都会触发它们的事件？

Answer 1

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

例如，这是一个代码片段，它会为点击下的每个SVG形状提供一个随机颜色。

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

不幸的是，目前这只适用于Chrome（也可能是Safari？）。据推测，FF对此实施了部分支持，但目前似乎已被删除。

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

1 个答案: