为什么带有 SVG 的 CSS 剪辑路径在 Safari 中不起作用？

Question

我在标头上有一个内嵌 svg 和一个背景图片。 我正在使用 css 剪辑路径通过下图“剪辑”出 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 中有效。

如果使用 -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 的问题。有一个 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

对我来说，我的问题是我的IMG 标签带有position:relative

Answer 4

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

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

我建议查看这篇文章中接受的答案： How to set iframe content of a react component