多个元素上的内联SVG clipPath

Question

我正在尝试在多个图像元素上使用相同的SVG clipPath。

它在FF和Chrome中运行良好，但是当我尝试在Safari中运行此代码时，它会在第一张图像后中断。在Internet Explorer 10+中，它似乎根本不起作用

我如何才能在safari和IE10 +中完成这项工作？

.clip {
  -webkit-clip-path: url("#myclippath");
  clip-path: url("#myclippath");
}

img {
  width: 200px;
}

<img class="clip" src="https://a248.e.akamai.net/assets.github.com/images/modules/logos_page/Octocat.png" />

<img class="clip" src="https://a248.e.akamai.net/assets.github.com/images/modules/logos_page/Octocat.png" />

<img class="clip" src="https://a248.e.akamai.net/assets.github.com/images/modules/logos_page/Octocat.png" />


    <svg>
          <defs>
                <clipPath id="myclippath" clipPathUnits="objectBoundingBox">
                      <polygon points="0 0, 0.38 0, 0.50 0.4, 0.62 0, 1 0, 1 1, 0 1" />
                </clipPath>
        </defs>
    </svg>