css - 在 Firefox 中使用带有剪辑路径的外部 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;
}

这行不通。使剪切路径在 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">