Question

我想要做的是使用带有webpack的svg加载多个外部import图像，然后使用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？愿意接受，谢谢！

Answer 1

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

您可以使用此innerSVG polyfill mirror。

使用npm安装：

npm install innersvg-polyfill --save-dev

使用webpack导入：

import * as innerSVG from 'innersvg-polyfill'

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

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

1 个答案: