Question

我觉得我遇到了一个奇怪的错误。当我将过滤器应用到同一个元素时，我通过引用的SVG元素没有应用剪辑路径的问题，所以我开始调查。

这不是导致问题的过滤器。我花了一段时间才找到这个，因为我的剪辑路径是一个完整的矩形，在某种程度上没有过滤器。请参阅my post here。

我发现在Firefox中，即使没有过滤器，也不会应用剪辑路径。不知何故，剪辑路径只有在我通过<style></style>引用HTML中的SVG＃id时才有效。如果我<link rel="stylesheet" href="style.css">，虽然正在应用所有其他CSS，但它无法工作。

由于codepen和jsfiddle使用<style>，我无法创建和示例。请在此下载文件以进行测试：Dropbox

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

<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并重新加载。瞧，红三角。

可能导致这种情况的原因是什么？而且，如何在不必在<style>中定义的情况下解决这个问题？我需要构建组件，所以这有点混乱。

Answer 1

您的理解是问题，而不是Firefox。

如果你写url（#id）是url（＆lt; this file＆gt; #id）的缩写，那么当你在html文件中写url（#absolute_path）时它会扩展为url（test.html＃ absolute_path）并且因为test.html中有一个id为absolute_path的元素，所以一切正常。

如果你在你的css文件中写它然后它变成url（test.css＃absolute_path）但是css文件中没有id为absolute_path的元素。

像jsfiddle这样的东西，所有东西都在同一个文件中，所以它也都在那里工作。

基于webkit的浏览器（Chrome，Safari和最近的Opera）有一个长期存在的错误，因为他们错了。

正如您所看到的，您真的需要在css文件中使用url（test.html＃absolute_path）。

Answer 2

我最终通过使用Firefox的外部svg文件来解决它：

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

这样我就可以构建我需要的URL独立组件。

SVG剪辑路径在线工作，如果CSS没有链接但内联

2 个答案: