什么可以让 Safari 使用 SVG 跳过剪辑路径和蒙版？

Question

我在 Firefox 中使用带有 .svg 文件链接的剪辑路径没有任何问题，但 Safari 似乎拒绝使用它们。

如果你在 Firefox 中加载我的 WIP 页面 http://www.omakadesign.com，你会在菜单底部看到一个蝴蝶图案，但如果你在 Safari 中加载它，菜单完全是矩形的。

相关行出现在 main.css (221) 中，如下所示：

    clip-path: url("../img/menu-news.svg#news-clip");

关于 clip-path 和 Safari 的信息似乎很少，在这个网站上也没有太多关于它的问题（相信我，我已经看过了）。但是话又说回来，即使在 Firefox 中，我什至无法使用 clip-path 获得最基本的内联 svg 示例，所以也许我在这个主题上缺少一些基本的东西？

（另外，虽然这是另一个主题，但为什么这些菜单在底部同时有填充和边距对我来说是个谜，因为我使用 min-width 将它们归零......）

更新：

我做了一个测试并创建了一个带有掩码标签的 .svg，并将上面出现的剪辑路径行替换为一个 css 掩码（如果你想用 Firefox 样式编辑器尝试它，仍然是 221），令人惊讶的是仍然可以在 Firefox 和 Safari 中使用，但仍会跳过它：

    mask: url("../img/menu-news-mask.svg#news-mask");

（最终更新：找到了解决方案，但我不允许再发布 5 个小时...结果，您必须使用非常、非常具体的 SVG 并为 Safari 使用 -webkit-mask。）

Answer 1

我找到了解决方案。您必须使用非常具体的 SVG 代码！完全按照这个人的例子，在 Safari 中也可以进行剪辑：

https://github.com/Modernizr/Modernizr/issues/213#issuecomment-1149691

（抱歉，我为自己的第一个问题发布了自己的答案，但我真的很绝望，我通常发现当你开始问别人时，你就会偶然发现解决方案......）

编辑：在 IE9 中不起作用，我并不真正关心，但只是提醒那些这样做的人（后备只是一个简单的矩形菜单，对我来说仍然有效）。

Answer 2

感谢您提供指向 Modernizr 的 github 的链接！

如果您正在剪辑图像，重要的是路径必须在 clipPath 内。

附带说明，如果您从 Illustrator 导出 SVG 代码。只要确保使用实际路径而不是这个：

<defs>
  <path id="path" d="....">
</defs>
<clipPath id="clipping">
  <use xlink:href="#path"/>
</clipPath>
<image clip-path=url(#clipping) ...>

到实际路径这样...

<clipPath id="clipping">
  <path id="path" d="....">
</clipPath>
<image clip-path=url(#clipping) ...>

它适用于 FF、Chrome、Safari、Opera 和 IE9 & 10。 这是jsfiddle

编辑

现在我意识到的原始问题与我遇到的问题略有不同......这是使用 svg 路径将 svg 的图像 outside 剪辑为 img 标签。不幸的是，当我尝试完全相同的方法时，IE，甚至 10 都不起作用。因此，如果您只有一个图像，最好将图像嵌入到 svg 本身中，而不是使用路径剪切 img 标签。这适用于 IE9&10，然后是一些..

Answer 3

对于您问题的第二部分（..为什么这些菜单在底部都有填充和边距..）：

main.css 第 95 行

nav a {
  background: none repeat scroll 0 0 #616161;
  color: white;
  display: block;
  font: 12px/20px Lucida Sans Unicode,Lucida Grande,Lucida Sans;
  margin-bottom: 10px;
  padding: 15px 0;
  text-align: center;
  text-decoration: none;
}