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

Question

我在 header 上有一个内联 svg 和一个背景图片。我正在使用 css clip-path 来“剪辑”出带有下图的 svg 动画。

我让它在 firefox 和 chrome 中运行良好，但 safari 根本不应用任何剪裁/ mask 。

我在开始这个元素之前检查了 caniuse 规范，它声明了适用于 chrome 的相同规则和异常(exception)情况，我只是先用 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- 前缀。在将 -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);
}

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;
});

fork 的 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 列为不支持。

JSFiddle 行为截图:

✗ 不正确

✗ 不正确

✓ 正确