SVG clip-path online works if CSS not linked but inline

问题

Am encountering a weird bug, well I think. I was having issues with a clip-path via a referenced SVG element not being applied when I applied a filter to the same element so I started investigating.

It was not the filter causing issues. It took me a while to find this as my clip-path was a full rect that somehow worked without filter. See my post here.

I found out that in Firefox the clip-path is not applied at all, even without the filter. Somehow the clip-path only works if I reference the SVG#id in the HTML via <style></style>. It fails to work if I <link rel="stylesheet" href="style.css"> although all other CSS is being applied.

Since codepen and jsfiddle work with <style> I can't create and example. Please download the files here to test: Dropbox

I have created an external css file and and an line style

<style type="text/css">
    XXX.triangle {
    position: absolute;
    width: 200px;
    height: 200px;
    margin: 10px;
    background: red;

    -webkit-clip-path: url(#absolute_path);
    -moz-clip-path: url(#absolute_path);
    -o-clip-path: url(#absolute_path);
    clip-path: url(#absolute_path);
}
</style>

First try the files in Firefox as downloaded. You'll see a red square. Then change XXX.traingle to .triangle in the <style> in the HTML file and reload. Voila, a red triangle.

What might be causing this? And more, how could I fix this without having to define in <style>? I need to build components so this kinda messes things up.

回答1:

It's your understanding that's the problem, not Firefox.

If you write url(#id) that's short for url(<this file>#id) so when you write url(#absolute_path) in your html file it expands to url(test.html#absolute_path) and as there is an element with an id of absolute_path in test.html, everything works.

If you write it in your css file then it becomes url(test.css#absolute_path) but there's no element with an id of absolute_path in the css file.

With something like jsfiddle, everything is really in the same document so it all works there too.

Browsers based on webkit (Chrome, Safari and lately Opera) have a longstanding bug in that they get this wrong.

As you can see you really want url(test.html#absolute_path) in your css file.

回答2:

I ended up solving it by using an external svg file for Firefox:

url(svg-in-css-directory.svg#clippath-id);

This way I can build the URL independent components I needed.

来源：https://stackoverflow.com/questions/31772152/svg-clip-path-online-works-if-css-not-linked-but-inline

标签

css

firefox

svg

clip-path