Verwenden von SVG-Symbolen in Firefox mit AngularJS

Question

Ich versuche SVG-Symbole mit Angularjs mit html5Mode auf True zu verwenden. Um html5mode URLs zu verwenden, müssen Sie die basePath im Kopf des HTML-Dokuments festlegen.

<base href="/"> 

Ich dann laden alle meine Svg-Symbole in die index.html Seite als Symbole.

<?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> 

ich kann nicht herausfinden, wie diese konsequent in Firefox zur Arbeit zu kommen. In Chrome und IE kann ich immer nur die Svg use href auf die ID des Svg-Symbols setzen.

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

Keines der Symbole wird jedoch in Firefox angezeigt. Von einer vorherigen Frage wurde mir gesagt, dass dies wegen des Tags base war. Also habe ich versuchte

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

den base-Tag auf eine absolute URL setzen und versuchte dann jede Kombination von URLs für den use-Tag. Ich habe es schließlich zum Laufen gebracht, wenn ich eine absolute URL verwende, die auf dem ursprünglichen Pfad basiert, von dem die Seite index.html heruntergeladen wurde.

Zum Beispiel, wenn die Seite von http://localhost:5080/user geladen wurde dann den use Tag wie die folgenden Einrichtung wird die Symbole angezeigt werden:

<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> 

Diese Ordnung funktioniert, wenn der Benutzer rund um die App klicken. Wenn der Benutzer die Seite jedoch auf http://localhost:5080/photos aktualisiert, werden alle Symbole erneut unterbrochen, da href jetzt falsch ist. Also fing ich an, die ursprüngliche URL zu cachen, von der die Seite index.html geladen wurde. Aber auch dann, wenn einige Seiten aktualisiert werden, werden alle Symbole erneut unterbrochen.

Mit html5mode mit AngularJS, was das Richtige ist den base-Tag zu setzen und was das Richtige ist der use Tag href zu setzen, um die Symbole zeigen, bis in IE, Chrome und Firefox zu machen?

Answer 1

Es scheint, wie dieser Fehler, die here und fixierte von Jeff Kreuz (von Google) erwähnt von this

Auto-Richtlinien automatisch URLs absolute Hash neu zu schreiben für Fragmentverweise in SVG-Elementen, um Nebenwirkungen in Gecko zu arbeiten und Blinzeln.

Answer 2

Für jeden, der sich in einem Winkel 2 Lösung für dieses gleiche Problem, ich war nicht in der Lage, einen zu finden, so veröffentlichte ich diese kleine Richtlinie NPM: https://www.npmjs.com/package/ng2-inline-href