Angulaire: liaison à xlink: href ne met pas à jour SVG dans IE11

Question

J'ai une application Angular 4 affichant un fichier SVG. Le SVG est dynamique et dépend du modèle. Ceci est réalisé en Biding à l'attribut use xlink:href:

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

Notez que icon est une variable et peut donc changer. Lorsque cela se produit, le SVG doit être mis à jour pour refléter cela. Tout fonctionne très bien dans Chrome, Firefox, Safari et Edge, mais dans IE, le SVG n'est pas mis à jour lorsque le modèle change. Voici un Plunker illustrant le problème. Cela fonctionne dans tous les navigateurs excepté IE (11). Des idées sur la façon de résoudre cela?

Answer 1

Vous pouvez utiliser le module svg4everybody. https://github.com/jonathantneal/svg4everybody

Juste npm i --save svg4verybody

Et à côté par exemple AppModule.ts vous devez ajouter

import * as svg4verybody from 'svg4everybody/dist/svg4everybody'; 
... 

ngOnInit() {svg4verybody();}