Append externe Svg mit d3 und Webpack in IE11

Question

Was ich tun möchte, ist in mehrere externe svg Bilder mit import mit Webpack laden, und fügen Sie sie an eine Gruppe mit d3. Ich verwende zur Zeit d3 .html Methode, aber es funktioniert nicht in IE11 und darunter.

Hier ist, wie es ist jetzt ein:

import aerosolsImage from '../../images/topic-aerosols.svg' 
import cloudsImage from '../../images/topic-clouds.svg' 
import fireImage from '../../images/topic-fire.svg' 

const topicsToImages = { 
    'aerosols': aerosolsImage, 
    'clouds': cloudsImage, 
    'fire': fireImage 
} 

... 

// called every few seconds to trigger new animation 
function start (topic, animationLayer) { 
    const g = animationLayer.append('g') 
    ... 
    g.append('g') 
    .html(topicsToImages[topic]); 
} 

Laden der SVG mit webpack gibt eine Zeichenfolge wie folgt aus:

"<svg xmlns="http://www.w3.org/2000/svg">...</svg>" 

Gibt es eine andere Möglichkeit, die SVGs mit d3 anhängen, die in IE funktioniert ? Offen für Ideen, danke!

Answer 1

Für zukünftige Programmierer, die das gleiche Problem haben, habe ich eine Lösung gefunden.

Sie können diese innerSVG polyfill mirror verwenden.

Installieren mit npm:

npm install innersvg-polyfill --save-dev 

Import mit webpack:

import * as innerSVG from 'innersvg-polyfill' 

und voila, können Sie jetzt d3 des .html oder Vanille .innerHTML Verfahren mit SVG-Knoten Cross-Browser verwenden :)