你需要-webkit-前缀。我可以在你的CSS和JS中添加-webkit-前缀后，确认你的圆圈和插入选项在Safari中工作。
如果使用-webkit-前缀，CanIUse.com报告部分支持Safari： http://caniuse.com/#search=clip-path

CSS：

#clipped {
  margin-bottom: 20px;
  clip-path: url(#cross);
  -webkit-clip-path: url(#cross);
}

字符串

JS：

var clipPathSelect = document.getElementById("clipPath");
clipPathSelect.addEventListener("change", function (evt) {
  document.getElementById("clipped").style.clipPath = evt.target.value;
  document.getElementById("clipped").style.webkitClipPath = evt.target.value;
});

型

分叉CodePen：https://codepen.io/techsock/pen/JEyqvM

更新

看起来这可能是Safari的clip-path实现的问题。有一个关于clip-path的webkit问题的**Master Bug**报告。在JSFiddle中，Safari偶尔会正确呈现包含多个rect元素的SVG剪辑路径，但并不可靠（见下面的截图）。似乎没有一个非常可靠的解决方案。在你从www.example.com上提取的MDN页面上也有说明https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path#Browser_compatibility。MDN将Safari列为No Support。

JSFiddle行为截图：

错误

错误

错误正确

只需要添加-webkit-前缀：

-webkit-clip-path: polygon(50% 0%, 1000% 0%, 50% 100%, -1000% 0%);

字符串

tl;dr：在应用clip-path的元素上使用transform: translateZ(0);。
我最近遇到了一个类似的问题，一个引用的SVG剪辑路径在Safari中无法正确渲染。我仍然不确定问题的原因是什么，但强制元素到自己的合成器层似乎可以解决这个问题。
任何强制元素在其自己的层上呈现的属性都可以。
transform: translateZ(0);个
will-change: transform;个
等等.
edit：这是在基于Webkit的浏览器中使用正确前缀的基础上。

对我来说，我的问题是，我有我的IMG标记与position:relative

我发现这个问题不会发生在storybook中，因为storybook将其组件 Package 在Iframe中。
这促使我测试我的理论，你瞧，你可以通过将你的组件 Package 在iframe中来修复safari上的剪辑路径问题。
我建议看看这篇文章上接受的答案：How to set iframe content of a react component

我在Safari 12中使用clip-path失败了。
我成功地使用了mask-image：

<style>
  video {
    -webkit-mask-image: url(/assets/images/mask.svg);
    mask-image: url(/assets/images/mask.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
</style>

<video preload="auto" muted autoplay loop>
  <source src="/assets/videos/video.m4v" type="video/x-m4v" />
</video>

字符串