SVG href ID is not found when being on a subsite/s

Question

This issue is concerning another topic: Creating Ajax website with links of multiple subfolders is failing. Please also have a look into the discussion where the solution for that issue was found.

My current issue with that solution is that when now being on a subsite like example.net/about all the ID's used by my SVG elements are not found anymore. So all my textpathes are located on the 0,0 coordinates on my map instead of the specific path I gave to them. Also SVG graphics are not located on the right place anymore. But being on example.net everything is still working fine!

So let's take the following example which is just one of my 500 elements and just the textpath elements. This is working as expected on abc.net but on abc.net/about the ID is not found anymore:

<path id="text1" d="M1585.621635966945,...some long path..."></path>
<textPath xlink:href="#text1">Some Text</textPath>

That for sure does make sense because on example.net/about#text1 there is not such an ID. So I was thinking about changing the href url. In the following I show you what I tried out and if it worked on "page(example.net)" or "subpage(example.net/about)":

1. <textPath xlink:href="#text1">Some Text</textPath> page working, subpage not working
2. <textPath xlink:href="http://example.net/#text1">Some Text</textPath> page working, subpage not working
3. <textPath xlink:href="http://example.net/text1">Some Text</textPath> page not working, subpage not working
4. <textPath xlink:href="http://example.net/index.html#text1">Some Text</textPath> page not working, subpage not working
5. <textPath xlink:href="http://example.net/index.html#text1">Some Text</textPath> page not working, subpage not working

I also have the <base href="http://example.net">set in the index.html head.

So how can I use the hashbang href way on connecting textpathes with SVG's.

Also the current htaccess

RewriteEngine On 
RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^(.*)$ index.php [L,QSA]

One idea that came to my mind right now was to set window.location.pathname="/"but unfortunately the page is reloading all the time now. So telling him a different URL even though using another is not really working out.

Also very interesting docs here: http://www.w3.org/TR/SVG/linking.html but was not able find a solution from that.

Answer 1

This one is working fine:

RewriteEngine On 
RewriteBase /

RewriteCond %{REQUEST_URI} !^/(?:css|js|maps|pics) [NC]
RewriteRule (/(?:css|js|maps|pics)/.*)$ $1 [NC,L]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^ index.html [L]

So rewriting the base in htaccess instead of in the index.html is the way to go. The additional rewrite reule above makes sure that also on example.net/about/creator you still find the correct css and so files.