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

Question

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

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

我发现在 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 中下载文件。你会看到一个红色方块。然后将HTML文件中<style>中的XXX.traingle改为.triangle，重新加载。瞧，一个红色三角形。

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

Answer 1

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

如果你写 url(#id) 那是 url(#id) 的缩写，所以当你写 url(#absolute_path)在您的 html 文件中，它扩展为 url(test.html#absolute_path) 并且因为 test.html 中有一个 id 为 absolute_path 的元素, 一切正常。

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

使用 jsfiddle 之类的东西，一切都在同一个文档中，所以它也在那里工作。

基于 webkit 的浏览器（Chrome、Safari 和最近的 Opera）有一个长期存在的错误，它们会出错。

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

Answer 2

我最终通过使用 Firefox 的外部 svg 文件解决了这个问题：

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

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

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

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

css

firefox

svg

clip-path