css - 如果 CSS 未链接但内联，则 SVG 剪辑路径在线有效

Question

我遇到了一个奇怪的错误，嗯，我想。当我将过滤器应用于同一元素时，我遇到了通过未应用引用的 SVG 元素的剪辑路径问题，因此我开始调查。

这不是导致问题的过滤器。我花了一段时间才找到这个，因为我的剪辑路径是一个完整的矩形，不知何故在没有过滤器的情况下也能工作。参见 my post here .

我发现在 Firefox 中 clip-path 根本没有应用，即使没有过滤器。不知何故，只有当我通过 <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 中的文件。你会看到一个红色方 block 。然后在 <style> 中将 XXX.traingle 更改为 .triangle在 HTML 文件中并重新加载。瞧，一个红色三 Angular 形。

这可能是什么原因造成的？而且，我怎样才能解决这个问题而不必在 <style> 中定义？ ？我需要构建组件，这样会把事情搞砸。

Answer 1

问题出在你的理解上，而不是 Firefox。

如果你写的 url(#id) 是 url(#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)有一个长期存在的错误，它们会出错。

如您所见，您确实需要 url(test.html#absolute_path) 在您的 css 文件中。