javascript - 蒙面盒子仍然调用函数

Question

有一种方法可以将鼠标悬停之类的事件附加到掩码中吗？这个例子显示了我的问题：http: //goo.gl/DRhsH

当您将鼠标 NEXT 传递给蓝色框时，它会更改遮罩的颜色，我想做的只是在鼠标经过蓝色框时调用该事件（不靠近 - 这是因为蓝色和红色框被另一个矩形遮住，当你将鼠标靠近它们时），因为我只需要使用显示的图像，并且绑定这样的事件应该可以解决我的问题。

我试图将单击/鼠标悬停绑定到一个组中，但它保持相同的结果，整个图像是可访问的，而不仅仅是查看的部分。我也尝试剪辑它，但它一直跟踪剪辑的内容

Answer 1

编辑：替换了以前的答案，因为事情不正确，盆景显然不允许剪裁。

我建议也使用遮罩路径作为剪辑路径，但 bonsiajs 似乎不支持这一点。无论如何，这是一个 SVG 结构，可以按您的意图触发事件。如果这不能使用盆景生成，也许你可以用另一种方式来做。

<svg width="596" height="596" viewBox="-0.5 -0.5 596 596" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <mask id="mask">
      <path d="M 0 0 l 50 0 l 0 150 l -50 0 Z" fill="rgba(255,255,0,1)"
        transform="matrix(1,0,0,1,80,0)" id="maskPath"/>
    </mask>
    <clipPath id="clipPath">
      <use xlink:href="#maskPath"/>
    </clipPath>
  </defs>
  <g>
    <g mask="url(#mask)" clip-path="url(#clipPath)" onmouseover="alert('in')">
      <path d="M 0 0 l 100 0 l 0 100 l -100 0 Z" fill="rgba(255,0,0,1)"/>
      <path d="M 0 0 l 100 0 l 0 100 l -100 0 Z" fill="rgba(0,0,255,1)"
        transform="matrix(1,0,0,1,50,50)"/>
    </g>
  </g>
</svg>