外部加载的 SVG 在 IE (Raphael JS) 中损坏

Question

我正在使用 jQuery 加载外部 SVG（法国地图）并使用 raphaël.js 以下代码将其解析为路径。但它在 IE 中没有做任何事情。有什么想法吗？

$(document).ready(function(){
    var paper = Raphael("canvas", 450, 380);
    var map = paper.set();

    // load svgz map
    $.ajax({
        type: "GET",
        url: "map-smllr.svgz",
        dataType: "xml",
        success: parseXml
    });

    // ... removed a few other variables

    function parseXml(xml) {
        var count = 0;
        $(xml).find("g").children("path").each(function()
        {
            var deptNr = depts[count];
            var path = $(this).attr("d");
            var c = paper.path(path);
            c.attr(attr).attr("title",deptNr);
            map.push(c);
            count++;
        });
        //startMap();
    }
});

您可以在此处查看完整来源：http://ngjulie.com/map/raphael.html

我在 Chrome 中也有一个时髦的缓存问题，在用户将鼠标悬停在画布上之前会显示一个空白点。

但最大的问题是这在 IE 中不起作用。 RaphaelJS 网站上的一般示例运行良好。所以它一定是我的代码中的东西。

有什么想法吗？

干杯， 朱莉

Answer 1

这似乎不起作用，因为 svgz 和 svg 图像使用 image/svg+xml mimetype 提供，这导致 IE XML 解析器失败（如果在 $.ajax 调用中设置错误条件，您' 会看到这种情况发生 - 无论如何这是一个好习惯）。同样，如果您在 IE 中导航到 http://ngjulie.com/map/map-smllr.svgz 或 http://ngjulie.com/map/map-smllr.svg，您会看到它尝试下载文件，而不是使用 IE XML 解析器组件解析它。

我认为，如果您使用 text/xml 或 application/xml mimetype 提供文件，它应该可以工作。我通过将 map-smllr.svgz 重命名为 map-smllr.xml 快速测试了这一点，从而使我的 Web 服务器可以轻松地为具有正确 mimetype 的文件提供服务。如果您在 IE8 中导航到该文件，您会看到它被解析为 XML。同样，XHR GET 成功，并且能够解析文件。然后其他一切都按预期工作。