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

Posted 2023-03-06

【中文标题】为啥带有 SVG 的 CSS 剪辑路径在 Safari 中不起作用？

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

【发布时间】：2017-06-11 03:47:21

【问题描述】：

我在标头上有一个内嵌 svg 和一个背景图片。 我正在使用 css 剪辑路径通过下图“剪辑”出 svg 动画。

我在 firefox 和 chrome 中运行良好，但 safari 根本不应用任何剪辑/遮罩。

我在开始这个项目之前检查了 caniuse 规范，它说明了适用于 chrome 的相同规则和例外情况，我只是先用 chrome 进行了测试，它有效，所以我继续研究它，认为 safari 将有相同的处理。

我一直在挠头，试图弄清楚如何让剪辑在 safari 中正常工作，但无济于事。

我怎样才能让它在 safari 中工作？ 笔供参考： https://codepen.io/H0BB5/pen/Xpawgp

html

<clipPath id="cross">
    <rect y="110" x="137"  />
    <rect x="0" y="110"  />
    <rect x="137" y="0"  />
    <rect x="0" y="0"  />
 </clipPath>

CSS

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

【参考方案1】：

您需要-webkit- 前缀。在您的 CSS 和 JS 添加 -webkit- 前缀后，我可以确认您的圆圈和插入选项在 Safari 中有效。

如果使用 -webkit- 前缀，CanIUse.com 报告部分支持 Safari：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;
);

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

✗不正确

✗不正确

✓ 正确

【讨论】：

感谢您的回复。您对 -webkit- 前缀的看法是正确的，我忘记将它保存在我的笔中，但是如果您查看分叉的笔并选择“交叉”选项，它仍然无法正常工作。这是因为交叉切换是唯一一个引用 SVG 剪辑的切换，其余的只是将样式应用于图像。剪辑路径在 safari 中无法正常运行。

是的，这似乎是您构建 SVG 的方式。我将另一个内联 SVG 放入笔中，它运行正常。我会看一看，看看我能不能看出什么问题。

嘿霍普金斯，我直接从 mozilla 的指南中得到了编写它们的方法：developer.mozilla.org/en-US/docs/Web/CSS/mask 你写出的哪种方法有效？

我已经用有关 Safari 问题呈现 clip-path 的信息更新了我的答案。

现在 MDN 说 ios safari 支持clip-path，但我仍然面临random 渲染

【参考方案2】：

只需要加上-webkit-前缀：

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

【讨论】：

有效，但不适用于 svg 的网址。我认为这是一个很好的后备方案，但不是 OP 感兴趣的。

【参考方案3】：

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

【参考方案4】：

我发现故事书中不会出现此问题，因为故事书将其组件包装在 iframe 中。

这促使我测试我的理论，你瞧，你可以通过将你的组件包装在 iframe 中来解决 safari 上的剪辑路径问题。

我建议查看这篇文章中接受的答案： How to set iframe content of a react component

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。