Javascript Firefox Angular2中SVG精灵的问题

在我的应用程序中，我使用

gulp svgstore

生成svg sprite，然后使用ajax调用在angular2 cli应用程序中加载index.html

<script>
  var ajax = new XMLHttpRequest();
  ajax.open("GET", "./assets/images/icon/sprite.svg", true);
  ajax.send();
  ajax.onload = function() {
    var div = document.createElement("div");
    div.setAttribute("class", "sprites");
    div.innerHTML = ajax.responseText;
    document.body.insertBefore(div, document.body.childNodes[0]);
  };
</script>

var ajax=new-XMLHttpRequest（）；
open（“GET“，”/assets/images/icon/sprite.svg”，true）；
ajax.send（）；
ajax.onload=function（）{
var div=document.createElement（“div”）；
div.setAttribute（“类”、“精灵”）；
div.innerHTML=ajax.responseText；
document.body.insertBefore（div，document.body.childNodes[0]）；
};

然后我为svg图标编写了一个组件：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'icon',
  template: `<svg class="icon" [style.width.px]="size" 
                               [style.height.px]="size" 
                               [style.fill]="fill"
                               [ngClass]="class">
                               <use [attr.xlink:href]="'#' + name"></use></svg>`
})
export class IconComponent {
  @Input() name: string;
  @Input() size: any;
  @Input() fill: any;
  @Input() class: any;
  @Input() marginLeft: any;

  constructor() { }

}

从'@angular/core'导入{Component，Input}；
@组成部分({
选择器：“图标”，
模板：`
`
})
导出类IconComponent{
@Input（）名称：string；
@Input（）大小：任意；
@输入（）填充：任意；
@Input（）类：任意；
@Input（）marginLeft:any；
构造函数（）{}
}

在Chrome或Safari浏览器中，这项功能可以正常工作，但在Firefox中，它不会出现任何错误或警告！当我在Firefox中选中网络标签时，它看起来像一个加载了的精灵文件，但仍然没有显示出来

如何解决此问题？为什么Firefox会这样做

---

非常感谢。

因为默认情况下，angulat将一个基本标记粘贴到标记中，该标记与url分辨率有关。@RobertLongson hum。那么我该怎么解决呢？@RobertLongson你发布的链接是关于angular1而不是2！！你们为什么把问题标为重复的？我还是不知道该怎么解决这个问题！！这个怎么样：有很多这样的问题。