SVG剪辑路径在本地工作，但不在线

以下svg剪辑路径在本地可正常使用，但不能在线使用：

<svg xml:space="preserve" enable-background="new 0 0 200 166.414" viewBox="0 0 200 166.414" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">

    <clipPath id="mask1">
        <rect height="116.673" width="116.673" stroke-miterlimit="10" stroke="#fff" fill="none" transform="matrix(0.7071 0.7071 -0.7071 0.7071 87.559 -44.972)" y="24.871" x="39.729"/>
    </clipPath>

    <line y2="82.438" x2="200" y1="82.438" x1="180" stroke-miterlimit="10" stroke="#fff" fill="none"/>
    <line y2="82.438" x2="17" y1="82.438" x1="0" stroke-miterlimit="10" stroke="#fff" fill="none"/>
    <rect height="116.673" width="116.673" stroke-miterlimit="10" stroke="#fff" fill="none" transform="matrix(0.7071 0.7071 -0.7071 0.7071 87.559 -44.972)" y="24.871" x="39.729"/>
    <rect height="107.393" width="107.393" stroke-miterlimit="10" stroke="#fff" fill="none" opacity="0.2" transform="matrix(0.7071 0.7071 -0.7071 0.7071 87.5595 -44.9719)" y="29.511" x="44.369"/>
    <image xlink:href="/content/events/eventImage_5.jpg" width="100%" height="100%" clip-path="url(#mask1)"/>
</svg>

也许这是我缺少的东西..我一直在尝试各种各样的方法，但是仍然没有运气。可以在此处查看实时示例：http : //akrotirilounge.gr/index

您可以在最顶部看到该示例，在该示例中，事件图像应被剪切为菱形，而不是完全被剪切。这可以在所有兼容的浏览器中完美呈现在本地。

谢谢