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

Question

我正在尝试在 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/

Answer 1

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

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

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