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成功，并且能够解析文件。其他一切都按预期工作。

在IE中打破外部加载的SVG（Raphael JS）

1 个答案: