Javascript 为什么带有 SVG 的 CSS 剪辑路径在 Safari 中不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41860477/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why doesn't CSS clip-path with SVG work in Safari?
提问by h0bb5
I have an inline svg and a background image on the masthead. I am using css clip-path to 'clip' out the svg animation with the image below.
我在刊头上有一个内联 svg 和一个背景图像。我正在使用 css clip-path 用下面的图像“剪辑”出 svg 动画。
I have it working great in firefox and chrome but safari doesn't apply any of the clipping/masking at all.
我在 Firefox 和 chrome 中运行良好，但 safari 根本不应用任何剪裁/遮罩。
I checked caniuse spec's before starting this project and it states the same rules and exceptions that apply to chrome, I just tested with chrome first and it worked so I continued on it figuring safari would have the same treatment.
在开始这个项目之前，我检查了 caniuse 规范，它说明了适用于 chrome 的相同规则和例外，我只是先用 chrome 进行了测试，它起作用了，所以我继续研究它，认为 safari 会得到相同的处理。
I have been scratching my head trying to figure out how to get the clipping to work properly in safari with no avail.
我一直在挠头，试图弄清楚如何让剪辑在 safari 中正常工作，但无济于事。
How can I get this to work in safari? Pen for reference: https://codepen.io/H0BB5/pen/Xpawgp
我怎样才能让它在 safari 中工作？笔参考：https: //codepen.io/H0BB5/pen/Xpawgp
HTML
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
CSS
#clipped {
margin-bottom: 20px;
clip-path: url(#cross);
}
回答by hopkins-matt
You need the -webkit-prefix. I can confirm your circle and inset options work in Safari after adding the -webkit-prefix to your CSS and JS.
你需要-webkit-前缀。在将-webkit-前缀添加到您的 CSS 和 JS后，我可以确认您的圆和插图选项在 Safari 中有效。
CanIUse.com reports partial support for Safari if using the -webkit-prefix: http://caniuse.com/#search=clip-path
如果使用-webkit-前缀，CanIUse.com 报告对 Safari 的部分支持：http: //caniuse.com/#search=clip-path
CSS:
CSS：
#clipped {
margin-bottom: 20px;
clip-path: url(#cross);
-webkit-clip-path: url(#cross);
}
JS:
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;
});
Forked CodePen:https://codepen.io/techsock/pen/JEyqvM
分叉 CodePen：https ://codepen.io/techsock/pen/JEyqvM
Update
更新
It appears that this may be an issue with Safari's implementation of clip-path. There is a Master Bugreported regard webkit issues with clip-path. In JSFiddle, Safari will occasionally render the SVG clip path containing multiple rectelements correctly, but not reliably (see attached screenshots below). There does not appear to be an extremely reliable workaround. It also is noted on the MDN page you pulled this example from: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path#Browser_compatibility. MDN lists Safari as No Support.
看来这可能是 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 behavior screenshots:
JSFiddle 行为截图：
? Incorrect
? 不正确
? Incorrect
? 不正确
? Correct
? 正确的
回答by Murtaza JAFARI
Just need to add -webkit-prefix:
只需要添加-webkit-前缀：
-webkit-clip-path: polygon(50% 0%, 1000% 0%, 50% 100%, -1000% 0%);
