在IE11中使用d3和Webpack添加外部svg

我想要做的就是使用webpack将import与多个外部svg图像进行加载，然后将它们附加到使用d3的组中。我目前使用d3的.html方法来做到这一点，但它在IE11及以下版本中不起作用。在IE11中使用d3和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]); 
}

加载与的WebPack的SVG返回一个像这样的字符串：

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

有另一种方式来追加使用D3，在IE工程的SVGs ？打开想法，谢谢！

来源

2017-06-02 Stuart Pearman

对于有同样问题的未来编码人员，我找到了一个解决方案。

您可以使用此innerSVG polyfill mirror。

安装与NPM：

npm install innersvg-polyfill --save-dev

进口用的WebPack：

import * as innerSVG from 'innersvg-polyfill'

，瞧，你现在可以使用D3的.html或香草.innerHTML方法与SVG节点跨浏览器:)

来源

2017-06-06 14:24:08

在IE11中使用d3和Webpack添加外部svg

回答

相关问题