IE3でd3とWebpackを使用して外部svgを追加する

Question

私がしたいのは、の画像をwebpackでimportを使用して複数の外部の画像に読み込み、d3を使用してグループに追加することです。私は現在、d3の.htmlメソッドを使用していますが、IE11以下では機能しません。ここで

は、それが今でセットアップされた方法は次のとおりです。WebPACKのでSVGをロード

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]); 
} 

は、このような文字列を返します。

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

はIEで動作D3を使用してSVGsを追加するが、別の方法であります？アイデアを開いて、ありがとう！

Answer 1

この同じ問題を抱える将来のコーダーのために、私は解決策を見つけました。

これはinnerSVG polyfill mirrorです。

NPMをインストールします。WebPACKのと

npm install innersvg-polyfill --save-dev 

インポート：

import * as innerSVG from 'innersvg-polyfill' 

と出来上がりを、あなたは今、SVGノードクロスブラウザとD3の.htmlやバニラ.innerHTMLメソッドを使用することができます:)