使用AngularJS在Firefox中使用SVG符号

Question

我正在尝试将Angularjs的SVG图标html5Mode设置为true.要使用html5mode网址,您需要basePath在html文档的头部设置.

<base href="/">

然后我将所有svg图标作为符号加载到index.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 usehref 设置为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标记设置为绝对网址

<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现在是不正确的.然后我开始缓存index.html页面加载的原始URL并使用它.但是,即使在某些页面上刷新,也会再次打破所有图标.

使用html5modeAngularJS,设置base标记的正确方法是什么,将use标记href 设置为什么才能使图标显示在IE,Chrome和Firefox中？

Answer 1

好像是提到这个bug 这里 和固定由杰夫·克罗斯(从谷歌)这

Auto指令自动重写SVG元素中片段引用的绝对散列URL,以解决Gecko和Blink中的副作用.