Question

我正在通过Prototype Ajax Request加载一个SVG文件，向它添加一个类和一个id，然后将它放入div中。将它添加到DOM时我的问题出现了：

onSuccess: function(response) { 

    var svgElement = response.responseXML.documentElement;
    svgElement.setAttribute("id", "someId");
    svgElement.setAttribute("class", "someClass");

    // At this point, everything is fine. I can verify that in IE9,
    // I have a valid svgElement and the id and class have been correctly set.

    var someDiv = $('someDiv');

    someDiv.appendChild(svgElement); // This fails in IE9, but works elsewhere!
    someDiv.insert(svgElement.xml); // This works in IE9, but fails elsewhere!

}

我只关心更好的浏览器 - IE9是我在这里要担心的最低价。

任何想法是什么？我暂时切换插入方法取决于我是否在IE中，但我想深入了解并以正确的方式修复它。

Answer 1

我通过使用responseText简单地在所有情况下创建我的新文档来解决“responseXML being in a different document”问题：

onSuccess: function(response) { 

    var svgDoc;

    if (window.DOMParser) {
      var domParser = new DOMParser();
      svgDoc = domParser.parseFromString(response.responseText, "text/xml");
    } else {
      svgDoc = new ActiveXObject("Microsoft.XMLDOM");
      svgDoc.async = false;
      svgDoc.loadXML(response.responseText);
    }

    var svgElement = svgDoc.documentElement;

}

如果您问我，那么比导入文档（以及所有相关问题）更简单，更清晰。

使用appendChild将SVG元素添加到HTML元素 - 在IE9中失败？

1 个答案: