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

Question

我正在通過原型Ajax請求加載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位於其他文檔中 ”的問題：

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;

}

如果您問我，這比導入文檔（及所有相關問題）更加輕松和整潔。