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

Question

我在标头上有一个内嵌svg和背景图像.我正在使用css clip-path来"剪切"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-前缀.在-webkit-为CSS和JS 添加前缀后,我可以确认您的圈子和插入选项在Safari中有效.

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

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

更新

看起来这可能是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行为截图:

✗不正确

✗不正确

✓正确