angularjs - base href + SVG Sprites = 不适用于 Firefox

Question

我正在使用我在 CSS Tricks ( https://css-tricks.com/svg-sprites-use-better-icon-fonts/ ) 上找到的一种技术将我的 SVG 精灵包含在我的应用程序中。

这是一个基本的 AngularJS 应用程序，我包含了 SVG，然后我使用标签来实现图标。

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

所有这些在除 Firefox 之外的所有浏览器中都能正常工作。经过调查，我注意到导致问题的是我的基本 href（由于应用程序插入旧系统的方式，我无法删除）：

<base href="/" />

谁能告诉我如何解决这个问题？

Answer 1

看起来很像一个黑客，但这是我丑陋的解决方案：

如果您使用的是ngRoute：

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

或UI 路由器：

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

在你的index.html中：

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