SVG剪切路径在线工作，即使CSS未链接但内联。

Question

我遇到了一个奇怪的 bug，我认为是这样的。我在应用滤镜于引用 SVG 元素的 clip-path 时遇到了问题，所以我开始进行调查。

问题并不是由滤镜引起的。我的 clip-path 是一个完整的矩形，它不需要滤镜就能正常工作，但花费了我一些时间才找出原因。请参考我在这里的帖子。

我发现在 Firefox 中根本没有应用 clip-path，即使没有滤镜也是如此。通过 <style></style> 在 HTML 中引用 SVG#id 才能让 clip-path 工作。如果使用 <link rel="stylesheet" href="style.css">，虽然所有其他 CSS 都已经被应用，clip-path 却仍然无法工作。

由于 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>的情况下解决这个问题？我需要构建组件，所以这会有些混乱。

- Bartezz

Answer 1

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

如果你写url(#id)，那么它其实是缩写自url(<this file>#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)。

- Robert Longson

---

尝试添加URL，确实有效！但我必须说，我喜欢webkit浏览器出现错误的事实。因为“正确”的实现怎么能用呢？为每个使用此组件的URL编写依赖于URL的CSS？那有点荒谬！尝试在#id之前添加../，希望这样可以使其更易用，但这也是不行的。如果我需要这个工作组件化和模板/URL无关，那么是否只能通过在HTML中定义内联样式来实现？或者我还有其他选择吗？ - Bartezz

CSS规范先于SVG规范。因此，“正确”的实现并没有考虑到SVG的需求。内联似乎对你来说是最好的选择。 - Robert Longson

Answer 2

我最终通过在Firefox中使用外部SVG文件来解决了这个问题：

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

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

- Bartezz