在 IE11 中使用 d3 和 Webpack 附加外部 svg答案

【问题标题】：Append external svg using d3 and Webpack in IE11在 IE11 中使用 d3 和 Webpack 附加外部 svg
【发布时间】：2017-11-04 08:20:38
【问题描述】：

我想要做的是使用带有 webpack 的 import 加载多个外部 svg 图像，并使用 d3 将它们附加到一个组中。我目前正在使用 d3 的 .html 方法来执行此操作，但它在 IE11 及以下版本中不起作用。

现在是这样设置的：

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>"

是否有另一种方法可以在 IE 中使用 d3 附加 SVG？欢迎提出想法，谢谢！

【问题讨论】：

标签： internet-explorer d3.js svg webpack

【解决方案1】：

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

你可以使用这个innerSVG polyfill mirror。

使用 npm 安装：

npm install innersvg-polyfill --save-dev

使用 webpack 导入：

import * as innerSVG from 'innersvg-polyfill'

瞧，您现在可以使用 d3 的 .html 或 vanilla .innerHTML 方法与 svg 节点跨浏览器:)

【讨论】：

只是想说非常感谢这个+导入示例！你是真正的 StackOverflow 英雄 :)