为什么没有SV剪辑路径与SVG在Safari中工作？

Question

我在标头上有一个内嵌svg和背景图片。 我正在使用css clip-path来剪辑＆＃39;用下面的图像输出svg动画。

我在firefox和chrome上工作得很好，但safari根本没有应用任何剪辑/屏蔽。

我在开始这个项目之前检查了caniuse规范，并且它说明了适用于chrome的相同规则和例外，我刚刚使用chrome进行测试并且它起作用所以我继续对它进行预测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中有效。

如果使用#clipped { margin-bottom: 20px; clip-path: url(#cross); -webkit-clip-path: url(#cross); } 前缀，CanIUse.com会报告对Safari的部分支持：http://caniuse.com/#search=clip-path

<强> CSS：

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

<强> JS：

clip-path

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

更新

看来这可能是Safari实施clip-path的问题。 Master Bug 报告了rect的webkit问题。在JSFiddle中，Safari偶尔会正确呈现包含多个No Support元素的SVG剪辑路径，但不可靠（请参阅下面的附件截图）。似乎没有一个非常可靠的解决方法。您还可以在MDN页面上注明这个示例：https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path#Browser_compatibility。 MDN将Safari列为{{1}}。

JSFiddle行为截图：

✗不正确

✗不正确

✓正确

Answer 2

只需添加-webkit-前缀：

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

Answer 3

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