为什么 CSS 剪辑路径与 SVG 不能在 Safari 中工作？

Question

我在标头上有一个内联 svg 和一个背景图像。 我正在使用 css Clip-path 来“剪辑”出 svg 动画，如下图所示。

我让它在 Firefox 和 Chrome 中工作得很好，但 Safari 根本不应用任何剪切/遮罩。

在开始这个项目之前，我检查了 caniuse 规范，它规定了适用于 chrome 的相同规则和例外，我只是先用 chrome 进行了测试，它起作用了，所以我继续研究它，认为 safari 也会有相同的处理。

我一直在绞尽脑汁试图弄清楚如何让剪辑在 Safari 中正常工作，但没有成功。

我怎样才能让它在 Safari 中工作？ 笔供参考： https://codepen.io/H0BB5/pen/Xpawgp

HTML

<clipPath id="cross">
    <rect y="110" x="137" width="90" height="90"/>
    <rect x="0" y="110" width="90" height="90"/>
    <rect x="137" y="0" width="90" height="90"/>
    <rect x="0" y="0" width="90" height="90"/>
 </clipPath>

CSS

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

Answer 1

您需要

-webkit-

前缀。在您的 CSS 和 JS 中添加

-webkit-

前缀后，我可以确认您的圆圈和插图选项在 Safari 中是否有效。

CanIUse.com 报告如果使用

-webkit-

前缀则部分支持 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

的问题。有一个 Master Bug 报告了关于

clip-path

的 webkit 问题。在 JSFiddle 中，Safari 偶尔会正确渲染包含多个

rect

元素的 SVG 剪辑路径，但不可靠（请参阅下面所附的屏幕截图）。似乎没有非常可靠的解决方法。您从中提取此示例的 MDN 页面上也注明了这一点：https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path#Browser_compatibility。 MDN 将 Safari 列为

No Support

。

JSFiddle 行为截图：

✗ 错误

✗ 错误

✓ 正确

Answer 2

只需添加

-webkit-

前缀：

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

Answer 3

tl;dr：在应用剪辑路径的元素上使用

transform: translateZ(0);

。

我最近遇到了类似的问题，引用的 SVG 剪辑路径无法在 Safari 中正确呈现。我仍然不确定问题的原因是什么，但将元素强制到其自己的合成器层似乎可以修复它。

任何强制元素在其自己的图层上渲染的属性都可以。

transform: translateZ(0);

will-change: transform;

等等..

编辑：这是对基于 Webkit 的浏览器使用正确前缀的基础。

Answer 4

对我来说，我的问题是我的

IMG

标签带有

position:relative

Answer 5

我发现这个问题不会出现在故事书中，因为故事书将其组件包装在 Iframe 中。

这促使我测试我的理论，你瞧，你可以通过将组件包装在 iframe 中来修复 safari 上的剪辑路径问题。

我建议查看这篇文章中已接受的答案： 如何设置React组件的iframe内容

Answer 6

我在 Safari 12 中使用 Clip-path 失败了...
我成功地使用了蒙版图像：

<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>