Question

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

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

相关的行显示在main.css（221）中，如下所示：

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

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

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

更新：

我做了一个测试并创建了一个带有掩码标签的.svg并用css掩码替换了上面显示的剪辑路径行（如果你想用Firefox样式编辑器尝试它，仍然是221）并且令人惊讶地仍然适用于Firefox和Safari STILL会跳过它：

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

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

Answer 1

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

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

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

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

Answer 2

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

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;
}

Answer 3

感谢您拥有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＆amp; 10。这是jsfiddle

修改

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

是什么让Safari可以跳过带有SVG的剪辑路径和掩码？

3 个答案: