1

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?

eHx
  • 181
  • 2
  • 17
  • You'll have to use absolute URLs if you can't remove ``. Of course that will break things on most other UAs. So if you can't remove `` life is going to be pretty hard for you. – Robert Longson Oct 21 '15 at 18:34
  • The only other way would be to move all the SVG code into a separate file and display it via the `` or ` – Robert Longson Oct 21 '15 at 19:30
  • What if I need to modify the colors? I'm thinking embedding it in an object won't make it editable. – eHx Oct 22 '15 at 00:55
  • http://stackoverflow.com/questions/2753732/how-to-access-svg-elements-with-javascript or http://stackoverflow.com/questions/4911525/is-it-possible-to-navigate-svg-objects-elements-from-enclosing-html – Robert Longson Oct 22 '15 at 07:13
  • I think, this could be resolve your problem [Stackoverflow --> SVG symbols not being displayed in Firefox](https://stackoverflow.com/questions/27306759/svg-symbols-not-being-displayed-in-firefox) – kayza Jun 28 '17 at 16:07

1 Answers1

0

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()}}" />
Pavlo Shandro
  • 808
  • 5
  • 12