如果CSS未链接但内联，则SVG剪辑路径在线有效 [英] SVG clip-path online works if CSS not linked but inline

问题描述

我遇到一个奇怪的错误.当我对同一元素应用过滤器时，我遇到了由于未应用引用的SVG元素而导致的剪切路径问题.

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.

我发现在Firefox中，即使没有过滤器，也根本不会应用剪切路径.不知何故，如果我通过<style></style>在HTML中引用了SVG#id，则剪切路径仅适用.如果我<link rel="stylesheet" href="style.css">，尽管所有其他CSS正在被应用，它还是无法工作.

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.

由于codepen和jsfiddle与<style>一起使用，因此我无法创建示例.请在此处下载文件进行测试: Dropbox

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

我创建了一个外部CSS文件和一个线条样式

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>

首先尝试在Firefox中下载已下载的文件.您会看到一个红色正方形.然后在HTML文件的<style>中将XXX.traingle更改为.triangle并重新加载.瞧，红色三角形.

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.

可能是什么原因造成的?还有，我如何解决这个问题而不必在<style>中定义?我需要构建组件，这样有点混乱.

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.

推荐答案

我最终通过使用用于Firefox的外部svg文件解决了该问题:

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

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

通过这种方式，我可以构建所需的独立于URL的组件.

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

这篇关于如果CSS未链接但内联，则SVG剪辑路径在线有效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！