在Firefox和AngularJS中使用SVG符号

Question

我试图将SVG图标与Angularjs一起使用，并将html5Mode设置为true。为了使用HTML5模式URL，您需要在html文档的头部设置基本路径。

<base href="/">

然后，我将所有svg图标加载到索引中。html页面作为符号。

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
    <symbol id="user" viewBox="0 0 64 64">
        <path d="...">
    </symbol>
</svg>

我不知道如何在Firefox中保持一致。在Chrome和IE中，我总是可以将svg设置为svg符号的id。

<svg ng-class="type" class="main-nav-icon">
   <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#user"></use>
</svg>

但是，Firefox中没有显示任何图标。从之前的问题中，我被告知这是因为base标签。所以我尝试将base标签设置为绝对url

<base href="http://localhost:5080/">

然后尝试use标签的所有url组合。如果我使用基于下载index.html页面的原始路径的绝对url，我终于让它工作了。

例如，如果页面是从http://localhost:5080/user加载的，那么像下面这样设置use标记将显示图标：

<svg ng-class="type" class="main-nav-icon">
   <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://localhost:5080/user#user"></use>
</svg>

当用户在应用程序周围单击时，此操作正常。但是，如果用户随后在<代码>http://localhost:5080/photos由于href现在不正确，所有图标再次被破坏。然后我开始缓存索引所在的原始url。html页面是从中加载并使用它的。然而，即使在某些页面上刷新，也会再次破坏所有图标。

在AngularJS中使用html5mode，将基本标签设置为什么是正确的，使用标签href设置为什么是正确的，以便在IE、Chrome和Firefox中显示图标？

Answer 1

对于任何对同一问题的Angular 2解决方案感兴趣的人，我找不到一个，所以我向NPM发布了这个小指令：https://www.npmjs.com/package/ng2-inline-href

Answer 2

似乎这里提到的这个错误并由Jeff Cross（来自谷歌）修复

Auto指令，用于自动重写SVG元素中片段引用的绝对哈希URL，以解决Gecko和Blink中的副作用。