Insane CSS Clip Path Bug on Firefox

问题

I'm trying out CSS Clip Path from http://www.smashingmagazine.com/2015/05/creating-responsive-shapes-with-clip-path/, and I have this insane bug. In a nutshell, the code works on both CodePen and JSFiddle, but it fails to work on my local/app.

Here's the code for the polygon I was trying to come up with. First the 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;
}

And here's the related 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>

When I open the index.html (the above HTML), it shows a rectangle instead of the polygon I was expecting. Yet I followed the exact instructions as is stated on the article.

Then I copy over the code to CodePen (http://codepen.io/anon/pen/JdwrQw) and JSFiddle (http://jsfiddle.net/yk95wxmL/), on the same browser, and it works.

I cannot for my life understand this. Firefox understands and does css clip path on the same code on CodePen and JSFiddle, but not on my HTML? To be sure, I copied my entire HTML over to Codepen, and css clip path works. This is totally beyond me. If someone can just come up with a suggestion that is perhaps glaringly obvious but I somehow missed it, I will be most thankful.

回答1:

Assuming the css is in a separate file i.e. css.css when you write

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

That's actually short for

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

But the file css.css does not have an element with an id of clip-shape (all the elements are in the html file).

You need to write

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

Obviously if you use jsfiddle everything goes in the same document so you don't see this issue there.

There's no Firefox bug here.

回答2:

thanks, this fixed it if the rule was in the CSS file:

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

it also works and required if only added to the d3 pattern:

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

来源：https://stackoverflow.com/questions/31768968/insane-css-clip-path-bug-on-firefox

标签

html

css

svg

clip-path