Angular：绑定到 xlink:href 不会更新 IE11 中的 SVG

Question

我有一个显示 SVG 的 Angular 4 应用程序。 SVG 是动态的并且取决于模型。这是通过绑定use xlink:href 属性来实现的：

<svg class="svg-icon">
  <use [attr.xlink:href]="'./symbol-defs.svg#' + icon" />
</svg>

请注意，icon 是一个变量，因此可以更改。发生这种情况时，应更新 SVG 以反映这一点。

在 Chrome、Firefox、Safari 和 Edge 中一切正常，但在 IE 中，模型更改时 SVG 不会更新。这是一个Plunker 说明问题。它适用于除 IE (11) 之外的所有浏览器。关于如何解决这个问题的任何想法？

Answer 1

您可以使用 svg4everybody 模块。 https://github.com/jonathantneal/svg4everybody

只要npm i --save svg4everybody

接下来，例如在 AppModule.ts 中您需要添加

import * as svg4everybody from 'svg4everybody/dist/svg4everybody';
…

ngOnInit() {svg4everybody();}