svg - クリップされたイベントSVGの背後にあるhtml要素のクリックイベント

Question

SVG 画像を rect でクリップしましたが、そのクリップされた部分を 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>