在Firefox中使用带有clip-path的外部SVG

Question

我想在Firefox中使用clip-path。

我正在使用以下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;
}

这样不起作用。在Firefox中，我唯一能够使剪切路径工作的方法是将此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/

- BarryWalsh

---

最好创建一个 jsfiddle 测试用例。 - Robert Longson

添加到问题中：http://jsfiddle.net/25VQD/ - BarryWalsh

剪辑路径必须与文档相同的域名，因此 jsfidlle 不能按原样工作。 - Robert Longson

我明白了。我无法在JSFiddle上进行适当的演示，但代码是存在的。 - BarryWalsh

Answer 1

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

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

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

- Robert Longson