3

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

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

我发现在 Firefox 中根本没有应用剪辑路径，即使没有过滤器也是如此。不知何故，只有当我通过 HTML 引用 SVG#id 时，剪辑路径才有效<style></style>。<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文件中的XXX.traingle改为.triangle<style>并重新加载。瞧，一个红色的三角形。

这可能是什么原因造成的？还有更多，我怎样才能解决这个问题而不必定义 in <style>？我需要构建组件，所以这有点搞砸了。

4

2 回答 2

4

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

如果您编写 url(#id) 是 url(<this file>#id) 的缩写，那么当您在 html 文件中编写 url(#absolute_path) 时，它会扩展为 url(test.html#absolute_path) 并且因为有一个元素在 test.html 中使用 absolute_path 的 id，一切正常。

如果你把它写在你的 css 文件中，那么它会变成 url(test.css#absolute_path) 但是 css 文件中没有绝对路径 id 的元素。

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

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

正如你所看到的，你真的想要 url(test.html#absolute_path) 在你的 css 文件中。

于 2015-08-02T14:23:22.250 回答
3

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

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

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

于 2015-08-03T21:52:04.000 回答