如何使svg蒙版图像与firefox兼容

Question

我有一些svg蒙版图像在Chrome中完美运行但在Firefox中不起作用。基本上我的svg给出了应用css的图像的形状，最终的结果就是这个。

这是我的svg代码

<svg width="0" height="0" viewBox="0 0 160 160">
  <defs>
    <clipPath id="shape">
      <path d="M10,70 Q0,80 10,90 L70,150 Q80,160 90,150 L150,90 Q160,80 150,70 L90,10 Q80,0 70,10z" />
    </clipPath>
  </defs>
</svg>

<img src='http://i.imgur.com/NR6kefg.jpg' class='photo_rectangle_inverse' />
<img src='http://i.imgur.com/DXaH323.jpg' class='photo_rectangle_inverse' />

这是我的css

* {
  padding: 0;
  margin: 0;
}
.photo_rectangle_inverse {
  height: 160px;
  width: 170px;
  -webkit-clip-path: url(#shape);
  clip-path: url(#shape);
  position: relative;
  -webkit-transform: translateZ(1px)
}

以下是Jsfiddle的所有内容。这在Chrome中完美无效，但在最新版本的Firefox（现在在Windows上）（FF 40.0.2）。

我去了这个Firefox article但是却找不到为什么这在Firefox中不起作用？

如何使这个svg蒙版图像与firefox兼容？

谢谢