Question

我有一个包含几个SVG（decedents）元素的SVG（目标）元素，这个容器SVG位于页面中的SVG（根）内部。我看到的问题是，如果我在SVG（目标）上注册事件，则只有在您点击其中一个SVG（死者）时才会触发该事件，就像没有SVG（目标）的边界框一样。除了用100％x 100％的透明矩形填充SVG（目标）之外我还有什么选择？

Answer 1

为什么不使用某种不同的方法分配事件。将属性分配给Elements。例如： -

让我们说下面是你的svg： -

<svg ... >

 <g id='container' data-action='selection'>
 <g id='child1' data-action='selection'>
</g>

 <g id='child2' data-action='selection'>
</g>


</g>

</svg>

现在在代码中，绑定文档上的事件。

document.addEventListener('mousedown',useraction,false);

function useraction(event){

if(event.target.hasAttribute('data-action')){
  var action=event.target.getAttribute('data-action');

   if(action==='selection'){
   //call your selection function to perform action.
   }
 }

}

单击通过SVG元素的事件（无边界框）

1 个答案: