Question

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

<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 use href设置为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标记的每个网址组合。如果我使用基于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并使用它。但是，即使在某些页面上刷新，也会再次破坏所有图标。

将html5mode与AngularJS一起使用，将base标记设置为什么是正确的，将use标记href设置为什么是正确的，以便制作图标出现在IE，Chrome和Firefox中？

Answer 1

好像这个bug提到here 并由Jeff Cross（来自谷歌）this

修复

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

Answer 2

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

使用AngularJS在Firefox中使用SVG符号

2 个答案: