1

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

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

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

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

关于剪辑路径和 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。）

4

3 回答 3

3

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

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

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

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

于 2013-05-16T06:48:47.607 回答
1

感谢您提供指向 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之外的图像剪辑为 img 标签。不幸的是，当我尝试完全相同的方法时，IE 甚至 10 都不起作用。因此，如果您只有一个图像，最好将图像嵌入到 svg 本身中，而不是使用路径剪切 img 标签。这适用于 IE9&10，然后是一些..

于 2013-08-21T14:46:13.573 回答
0

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

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;
}
于 2013-05-15T20:26:47.963 回答