为什么带有SVG的CSS剪辑路径在Safari中不起作用？ [英] Why doesn't CSS clip-path with SVG work in Safari?

问题描述

我在标头上有一个内嵌svg和背景图片。
我正在使用css clip-path来剪切svg动画，下面是图片。

我在firefox和chrome中运行得很好但是safari根本没有应用任何剪辑/屏蔽。

我在开始这个项目之前检查了caniuse规范，并且它说明了适用于chrome的相同规则和例外，我刚刚使用chrome进行了测试并且它工作正常我继续搞骗safari会有同样的待遇。

我一直在试图弄清楚如何在野生动物园中使剪辑正常工作而无济于事。

如何在Safari中使用它？
笔供参考：

✗不正确

✓正确

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.

I have it working great in firefox and chrome but safari doesn't apply any of the clipping/masking at all.

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.

I have been scratching my head trying to figure out how to get the clipping to work properly in safari with no avail.

How can I get this to work in safari? Pen for reference: 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);
}

解决方案

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.

CanIUse.com reports partial support for Safari if using the -webkit- prefix: 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;
});

Forked 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 Bug reported regard webkit issues with clip-path. In JSFiddle, Safari will occasionally render the SVG clip path containing multiple rect elements 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.

JSFiddle behavior screenshots:

✗ Incorrect

✗ Incorrect

✓ Correct

这篇关于为什么带有SVG的CSS剪辑路径在Safari中不起作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！