在 Firefox 中使用带有剪辑路径的外部 svg答案

【问题标题】：using an external svg with clip-path in Firefox在 Firefox 中使用带有剪辑路径的外部 svg
【发布时间】：2014-09-09 13:25:13
【问题描述】：

我正在尝试在 Firefox 中使用剪辑路径。

我在外部文件中使用以下 CSS：

.featured_event_panel{
  background:url(../images/home/screen2.jpg) repeat;
  background-position:center 50%;
  -webkit-clip-path: polygon(0 100%,100% 100%,100% 0%,50% 10%, 0 0);
  clip-path: url('../images/ui/clippath.svg#diamond');
  width:100%;
  padding:100px 0 150px;
  position:relative;
}

这不起作用。我可以让剪切路径在 FF 中工作的唯一方法是，如果我将此 CSS 规则放在文档的头部，并将 SVG 也放在文档中。 SVG 如下：

<svg>
  <defs>
   <clipPath id="diamond" clipPathUnits="objectBoundingBox">
      <polygon points="0 1, 1 1, 1 0, .5 .1, 0 0" />
    </clipPath>
  </defs>
</svg>

SVG 的路径相对于样式表是正确的，所以我不确定我在这里做错了什么。

有什么想法吗？干杯！

编辑：示例：http://jsfiddle.net/25VQD/

【问题讨论】：

最好是创建一个 jsfiddle 测试用例。
添加到问题jsfiddle.net/25VQD
剪辑路径必须与文档的域相同，这样 jsfidlle 就无法正常工作。
我明白了。那时我根本无法使用 jsfiddle 进行正确的演示，但代码就在那里。

标签： css firefox svg clip

【解决方案1】：

您的剪辑路径不是有效的 SVG 文件。线索是，当您直接在 Firefox 中显示它时，它会显示“此 XML 文件似乎没有任何与之关联的样式信息。文档树如下所示。”

要修复它，您需要将 SVG 命名空间添加到根元素，即

<svg xmlns="http://www.w3.org/2000/svg">

【讨论】：