为什么带有 SVG 的 CSS 剪辑路径在 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);
}

原文由 h0bb5 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要 -webkit- 前缀。在将 -webkit- 前缀添加到您的 CSS 和 JS 后，我可以确认您的 circle 和 inset 选项在 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);
}

记者：

 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 报告关于 webkit 问题 clip-path 。在 JSFiddle 中，Safari 偶尔会正确渲染包含多个 rect 元素的 SVG 剪辑路径，但不可靠（请参阅下面的附加屏幕截图）。似乎没有非常可靠的解决方法。您从中提取此示例的 MDN 页面上也指出了这一点： https ://developer.mozilla.org/en-US/docs/Web/CSS/clip-path#Browser_compatibility。 MDN 将 Safari 列为 No Support 。

JSFiddle 行为截图：

✗ 不正确

✗ 不正确

✓ 正确

原文由 hopkins-matt 发布，翻译遵循 CC BY-SA 4.0 许可协议