Quasar: SVG fill gets removed with router history mode

[privacyftw]

Describe the bug
When you have an SVG file with fill, the fill gets removed when:

• you are on a non-/ page, e. g. /second
• you are using router history mode

This is, however, not a vue router bug per se, as I've tested setting up a fresh vue project where that bug didn't occur.

Codepen/jsFiddle/Codesandbox (required)
https://codesandbox.io/s/cranky-sinoussi-qd666?file=/quasar.conf.js

To Reproduce
Steps to reproduce the behavior:

1. Go to the sandbox
2. Go to page via menu
3. See there's a svg
4. Open file quasar.conf.js
5. Change vueRouterMode to history
6. Reload the inbuilt browser and go to svg page again (either via menu or via /second - but remember to remove any hash from url)
7. SVG is gone (well, the fill is gone)

Expected behavior
The SVG fill should not be removed!

Platform (please complete the following information):
OS: Linux
Browsers: Firefox

[rstoenescu]

Hi,

Quasar has nothing to do with the svg in your templates. It does not tamper with it at all. Seems to me like it's more a FF bug than anything else. Your codepen works fine in Chrome for example. But the main point is that Quasar's code is not interfering with your issue.

[privacyftw]

@rstoenescu Thank you so much for noticing it's working with chrome. I noticed it works in all browsers, when the xlink:href or just href of the gradient is changed to second#a245h (which is unpractical since it makes the svg not reusable). In a pure vue project, it's working without that change. So my question is: Does quasar have a special vue-router config that could cause this behavior?

[rstoenescu]

It may be due to the base tag in head. But that is absolutely required in order for a lot of features to work correctly. Try ./#yourhash

[privacyftw]

@rstoenescu ./#yourhash won't work. You were right, it's the base tag.

According to the docs, it can be changed, e. g. by setting build.appBase to '', but it doesn't go into details about side effects, if any: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build

For now, in dev spa mode, I couldn't notice any immediate side effects with that setting.

BTW, this problem seems to be common when using the base tag with certain svgs:

https://stackoverflow.com/questions/18259032/using-base-tag-on-a-page-that-contains-svg-marker-elements-fails-to-render-marke
https://stackoverflow.com/questions/7759371/svg-gradient-turns-black-when-there-is-a-base-tag-in-html-page
https://stackoverflow.com/questions/46167623/angular-2-base-tag-and-svg-not-render-properly

So I'd say this is a issue of quasar's default settings, but I can understand if this is a "wontfix". It would be nice to know the side effects of setting appBase to '', also for other users who might read this in the future, since this seems to be a major issue when working with svgs.
Thank you.