javascript - Microsoft Edge 不会在对 gzipped SVG 文件的 ajax 调用中呈现 SVG 样式元素

Question

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

通过在浏览器上直接从文件 URL(而不是使用 ajax 调用)加载 SVG 文件，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 的屏幕截图)。有办法解决这个问题吗？

Answer 1

我刚刚删除了 document.importNode，现在问题就解决了:

var floorPlanSVG = response.documentElement;