疯狂的 CSS Firefox 上的剪辑路径错误

Question

我正在尝试 CSS 来自 http://www.smashingmagazine.com/2015/05/creating-responsive-shapes-with-clip-path/ 的剪辑路径，但我遇到了这个疯狂的错误。简而言之，该代码适用于 CodePen 和 JSFiddle，但它无法在我的 local/app 上运行。

这是我试图想出的多边形的代码。首先是 CSS：

nav {
    position: fixed;
    bottom: 0;
    background: #BE0F16;
    color: #fff;
    width: 100%;
    padding: 2rem 1rem;
    text-align: right;
    -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 50%);
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 50%);
    -webkit-clip-path: url("#clip-shape");
    clip-path: url("#clip-shape");
}
nav .next-chapter {
    color: #fff;
    padding-left: 1rem;
}

这是相关的 HTML：

<!DOCTYPE html>
<html>

<head>
    <title>Something</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <link href="css.css" rel="stylesheet" />
</head>

<body>
    <nav>
        <a class="menu"><i title="Menu" class="fa fa-bars"></i><h1 class="visuallyhidden">Menu</h1></a>
        <a class="next-chapter" href="/<%=next%>"><i title="Next Chapter" class="fa fa-hand-o-right"></i><span class="visuallyhidden">Next Chapter</span></a>
        <a id="comment" href="http://twitter.com/?status=@uebyn"></a>
    </nav>
    <svg width="0" height="0">
        <defs>
            <clipPath id="clip-shape" clipPathUnits="objectBoundingBox">
                <polygon points="0 0, 0 1, 1 1, 1 .5" />
            </clipPath>
        </defs>
    </svg>
    <script src="script.js"></script>
</body>

</html>

当我打开 index.html（上面的 HTML）时，它显示了一个矩形而不是我期望的多边形。然而，我按照文章中所述的确切说明进行了操作。

然后我将代码复制到 CodePen (http://codepen.io/anon/pen/JdwrQw) and JSFiddle (http://jsfiddle.net/yk95wxmL/)，在同一个浏览器上，然后就可以了。

我这辈子都无法理解这一点。 Firefox 理解并在 CodePen 和 JSFiddle 上的相同代码上执行 css 剪辑路径，但在我的 HTML 上没有？可以肯定的是，我将整个 HTML 复制到 Codepen，并且 css 剪辑路径有效。这完全超出了我的范围。如果有人能提出一个可能非常明显但我不知何故错过的建议，我将不胜感激。

Answer 1

假设 css 在一个单独的文件中，即 css.css 当你写

clip-path: url("#clip-shape");

这实际上是

的缩写

clip-path: url("css.css#clip-shape");

但是css.css文件中没有id为clip-shape的元素（所有元素都在html文件中）

你需要写

clip-path: url("<the name of the html file goes here>#clip-shape");

显然，如果您使用 jsfiddle，所有内容都在同一个文档中，因此您不会在那里看到这个问题。

这里没有 Firefox 错误。

Answer 2

谢谢，如果规则在 CSS 文件中，这修复了它：

.myclass{
clip-path: url("/~powersparks/bz.html#clip");
}

如果仅添加到 d3 模式，它也可以工作并且是必需的：

     svg.append("path")
      .datum(data)
      .attr("class", "area")
      .attr("clip-path", "url('/~powersparks/bz.html#clip')")
      .attr("d", area);

疯狂的 CSS Firefox 上的剪辑路径错误

Insane CSS Clip Path Bug on Firefox

html

css

svg

clip-path