Question

在本地运行节点服务器进行开发时，我的SVG过滤器起作用。但是，当我构建它并在服务器上运行它时，它不是。

VueJS项目正在使用Webpack。

我这样构建应用程序：

npm run build

我有这样声明的过滤器：

filter: url(#white-glow);

构建应用程序时，CSS位于子文件夹（/ static / css）中，因此我怀疑它不再能够找到过滤器。当我在检查器中检查HTML源代码时，SVG过滤器就在其中。

当我将上述过滤器作为样式属性应用到HTML中时，它将起作用。

<button style="filter:url(#white-glow);" data-v-32012fc8="">ｍｕｓｉｃ</button>

编辑：我不能使用上述方法，因为我希望过滤器仅在：active状态下处于活动状态，而对于内联样式属性则无法做到。

构建应用后，如何在外部CSS文件中使用过滤器？

Answer 1

选择器在外部css文件中将无法正常工作。

如果仅在一个文件中使用过滤器，则理论上可以在外部CSS文件中定义规则，如下所示：

filter: url(http://yourdomain.com/yourwebsite.html#white-glow);

尽管，这实际上没有任何意义，所以我建议将过滤器也放置在外部svg文件中，然后使用CSS文件中外部SVG文件的完整网址进行处理

Answer 2

我在网址之前添加了斜线。所以现在在我的Vue组件中看起来像这样，并且在构建时可以很好地解析。现在，在组件和已构建的CSS中都看起来像这样：

filter: url('/#white-glow');

我已经在Firefox 47和Chrome 70中成功进行了测试。

有人可以解释为什么这样做吗？