svg - 剪切事件 SVG 后面的 html 元素上的单击事件

Question

我已经通过 rect 剪辑了一个 svg 图像，但是现在 onclick 在那个剪辑的部分上如何触发 rect 而不是图像上的 onclick 事件。

这是我的代码：

http://jsfiddle.net/dnuboz21/

<div class="feature">
<img src="http://en.hdyo.org/assets/art-shutter-young-people-a12e2c0cd7a54920cb024fd1394190fd.jpg">
<svg class="glass">
  <image id="svg-image" width="980" height="652" xlink:href="http://en.hdyo.org/assets/art-shutter-young-people-a12e2c0cd7a54920cb024fd1394190fd.jpg" clip-path="url(#svg-mask)" />
  <filter id="svg-blur">
    <feGaussianBlur stdDeviation="15" />
  </filter>

  <clipPath id="svg-mask">


    <rect x="325" y="110" rx="40" ry="40" width="150" height="150"  style="fill:none;stroke:red;stroke-width:5;opacity:0.7"/>
  </clipPath>

</svg>
</div>