Xtykutl

When developing locally running a Node server, my SVG filter works. However, it doesn't when I build it and run it on a server.

The VueJS project is using Webpack.

I build the app like this:

npm run build

I have the filter declared like this:

filter: url(#white-glow);

When I build the application, the CSS is in a subfolder (/static/css) and I suspect as a result it can't find the filter anymore. When I check the HTML source in my inspector, the SVG filter is there.

When I apply said filter as a style attribute in the HTML it works.

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

Edit: I cannot use the above method since I want the filter to be active only in the :active state, which you can't do with inline style attribute.

How can I make the filter available in the external CSS file after building the app?

The selector will not work like generic in an external css file.

If you're using the filter only in one file you could theoretically define the rule in the external css file like this:

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

Although, this wouldn't really make sense, so I would suggest to place the filter in an external svg file as well and then address it with the full url to the external SVG file in your CSS file

I have added a slash before my url. So now it looks like this in my Vue component and it parses fine when building. It looks like this now in both the component and the built CSS:

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

I have successfully tested this in Firefox 47 and Chrome 70.

Could anybody explain why this works?