关于javascript：为什么SVG的CSS剪切路径在Safari中不起作用？

Why doesn't CSS clip-path with SVG work in Safari?

我在标头上有一个内嵌svg和一个背景图片。
我正在使用css剪切路径来"剪切"出具有以下图像的svg动画。

我在Firefox和Chrome中使用效果很好，但Safari浏览器根本不应用任何剪裁/遮罩功能。

在开始此项目之前，我检查了caniuse规范的内容，它指出了适用于chrome的相同规则和例外，我刚刚对chrome进行了测试，并且它起作用了，因此我继续进行下去，确定野生动物园将得到相同的待遇。

我一直在摸索，试图找出如何使剪辑在野生动物园中正常工作而无济于事。

我该如何在Safari中使用它？
笔供参考：
https://codepen.io/H0BB5/pen/Xpawgp

的HTML

1
2
3
4
5
6

的CSS

1
2
3
4

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

您需要-webkit-前缀。将-webkit-前缀添加到CSS和JS之后，我可以确认circle和inset选项在Safari中可以正常使用。

如果使用-webkit-前缀，CanIUse.com报告对Safari的部分支持：http://caniuse.com/#search=clip-path

CSS：

1
2
3
4
5

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

JS：

1
2
3
4
5

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行为截图：

？不正确的
Incorrect

？正确
Correct