base href + SVG Sprites = Not working on Firefox

Question

I'm using a technique I found on CSS Tricks ( https://css-tricks.com/svg-sprites-use-better-icon-fonts/ ) to include my SVG sprite in my application.

It's a basic AngularJS application, I include the SVG and then I use the tag to implement the icons.

<svg class="svg-icon"><use class="icon" xlink:href="#svgSprite-iconName" /></svg>

All of this works fine in all the browsers except Firefox. After investigating, I noticed it's my base href (that I cannot remove because of the way the application is plugged into an older system) that's causing the issue:

<base href="/" />

Can anyone tell me how I can fix this problem?

You'll have to use absolute URLs if you can't remove <base>. Of course that will break things on most other UAs. So if you can't remove <base> life is going to be pretty hard for you. — Robert Longson
The only other way would be to move all the SVG code into a separate file and display it via the <object> or <iframe> tag, rewriting any javascript as necessary for the new structure. — Robert Longson
What if I need to modify the colors? I'm thinking embedding it in an object won't make it editable. — eHx
stackoverflow.com/questions/2753732/… or stackoverflow.com/questions/4911525/… — Robert Longson
I think, this could be resolve your problem Stackoverflow --> SVG symbols not being displayed in Firefox — kayza

Pavlo Shandro Pavlo Shandro · Accepted Answer · 2016-03-11T21:38:08

Looks pretty much like a hack, but here's my ugly solution:

If you're using ngRoute:

$rootScope.$on("$routeChangeStart", function (event, next, current) {
    $rootScope.locationOrigin = $location.absUrl // Don't forget to inject `$location` dependency
});

or UI-Router:

$rootScope.$on("$stateChangeStart", function (event, next, current) {
    $rootScope.locationOrigin = $location.absUrl // Don't forget to inject `$location` dependency
});

And in your index.html:

<base href="/" 
      ng-href="{{locationOrigin()}}" />

base href + SVG Sprites = Not working on Firefox

1 Answers