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

Question

我已经通过rect剪切了一个svg图像，但是现在点击该剪切部分如何在矩形而不是图像上触发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>