Question

有一种方法可以将鼠标等事件附加到面具中吗？此示例显示了我的问题：http://goo.gl/DRhsH

当你将鼠标NEXT传递给蓝色框时，它会改变面具的颜色，我想做的就是只要在鼠标经过蓝框时调用该事件（不在附近 - 这种情况发生在蓝色和红色框用另一个矩形掩盖，当你在它们附近传递鼠标时），因为我只需要处理显示的图像，绑定这样的事件应该可以解决我的问题。

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

Answer 1

编辑：替换上一个答案，因为事情不正确，而bonsaijs显然不允许裁剪。

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

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

蒙面的盒子仍然可以调用函数

1 个答案: