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中显示它时，它说＆＃34;这个XML文件似乎没有任何与之关联的样式信息。文档树如下所示。＆＃34;

要解决此问题，您需要将SVG名称空间添加到根元素，即

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

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

1 个答案: