I have a SVG file (an interactive world map) exported from Illustrator, that I include directly into each page of a website.
This map has two shapes for each continent : a full one (filled with black), and another one using a pattern (a distinct one for each zone, filled with black stripes). When clicking a continent, the "full" shape's opacity is set to zero so the stripped one is visible instead.
My problem is the stripped zones aren't displayed correctly when I'm on another URL than the domain root. On Firefox, they are plainly invisible ; on Chrome, they are fully filled with black like their counterparts.
I'm pretty sure it has got to do with the fact I'm referencing the stripe patterns by url(#SVGID_n_) (once again, it has been generated like this in Illustrator, and I don't really care about optimizing it yet). But since the SVG is directly injected into my page, it should be able to find the referenced patterns no matter the URL. What should I fix in order to make it work on every page ?
The homepage, where everything works as expected : http://lesjeteursdencre.fr Another page, where the bug occurs : http://lesjeteursdencre.fr/2
To see it, click on the little planet with a pulsating arrow at the bottom, which will unveil the map, then click any continent.
Here is a code sample of one occurrence of the issue :
svg
<g id="europe-rayures">
<g>
<pattern id="SVGID_1_" xlink:href="#Nouveau_motif_4" patternTransform="matrix(1 0 0 1 45.2388 -5)"></pattern>
<path fill="url(#SVGID_1_)" d="..." />
</g>
</g>
Note : I tested it on Firefox and Chrome (both on Linux) so far. There may be other unrelated visual issues depending on your browser, please ignore them as my tests are not finished yet.
You have a <base> tag which is interfering with URL resolution (as it is supposed to do). Remove it and everything should work.