Question

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

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

List<Object> copy = new ArrayList<>(linkedList);
for (i=0; i<n-1; i++) {
    for (j=i+1; j<n; j++) {
        // do something with copy.get(i) and copy.get(j)
    }
}

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

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

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

Answer 1

看起来非常像黑客，但这是我的丑陋解决方案：

如果您正在使用 ngRoute ：

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

或 UI-Router ：

$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()}}" />

base href + SVG Sprites =不适用于Firefox

1 个答案: