外部加载的 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 调用中设置错误条件，您将看到这种情况发生了——无论如何，这是一个很好的做法）。同样，如果您导航到 http://ngjulie.com/map/map-smllr.svgz 或 http://ngjulie.com/map/map-smllr.svg 中在 IE 中，您会看到它尝试下载该文件，而不是使用 IE XML 解析器组件来解析该文件。

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