Microsoft Edge 不会在对 gzip 压缩的 SVG 文件的 ajax 调用上呈现 SVG 样式元素答案

【问题标题】：Microsoft Edge does not render SVG style elements on ajax call to a gzipped SVG fileMicrosoft Edge 不会在对 gzip 压缩的 SVG 文件的 ajax 调用上呈现 SVG 样式元素
【发布时间】：2018-01-16 21:15:05
【问题描述】：

我正在尝试获取压缩后的 SVG 文件的内容并将其附加到 HTML 并使用 d3.js 处理元素。一切都很好，SVG 文件的所有内容都被解析并使用 jquery 添加到 DOM 中，所有浏览器都在 SVG 内容中呈现样式标签，并将所有这些样式应用于 SVG 元素（Microsoft Edge 除外）。

通过在浏览器上直接从文件 URL 加载 SVG 文件（而不是使用 ajax 调用），Microsoft Edge 中的一切都很好。但是，尝试使用 ajax 获取内容时，它不会呈现样式并显示黑色元素，如下图所示：

这是通过从 Microsoft Edge 中的 URL 加载文件来显示的：

这是我用来调用文件的 ajax 代码：

var settings = {
       "crossDomain": true,
       "url": file.svg,
       "method": "GET"
};

$.ajax(settings).done(function (response) {

    var floorPlanSVG = document.importNode(response.documentElement,true);

    $('#appendedFloorPlan').append(floorPlanSVG);

});

这就是将 SVG 的内容添加到 DOM 的方式：

代码在所有浏览器中都很好，除了 Microsoft Edge（来自 Google Chrome 的屏幕截图）。有没有办法解决这个问题？

【问题讨论】：

让我想起了meta.stackoverflow.com/q/340293/3702797 我手头没有优势来帮助你，但那些有能力的人可能需要一些minimal reproducible example。至少是一个minimal（即只是一个<rect>）代码的标记，它再现了这种行为，充其量是一个工作小提琴（也许你可以在一些CORS ok服务上托管有罪的文件，比如dropbox）

标签： javascript jquery css d3.js svg

【解决方案1】：

我刚刚删除了document.importNode，问题马上解决了：

var floorPlanSVG = response.documentElement;

【讨论】：