title: Import SVG node into another document in IE9
body: <p>After fetching an SVG document using XHR I need to append a portion of it from the <code>responseXML</code> document into the current document. Using this code works on Safari/Chrome/FireFox, but does not work on IE9:</p>
  
  <pre><code>var xhr = new XMLHttpRequest;
  xhr.open('get','stirling4.svg',true);
  xhr.onreadystatechange = function(){
    if (xhr.readyState != 4) return;
    var g = xhr.responseXML.getElementsByTagName('g')[2];
    var p = document.getElementsByTagName('path')[0];
    p.parentNode.insertBefore(document.importNode(g,true),p);
  };
  xhr.send();
  </code></pre>
  
  <p>IE9 throws a script error when calling importNode:</p>
  
  <blockquote>
    <p>SCRIPT16386: No such interface supported</p>
  </blockquote>
  
  <p>I found <a href="http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/4236f1a1-746c-44b5-b41a-f84e58f20458" rel="nofollow">a question</a> where someone else reports a similar problem. You can see a live example of this problem <a href="http://phrogz.net/SVG/fetch_fragment.svg" rel="nofollow">on my website</a>. (The SVG file itself displays a fractal, uses XHR to fetch <a href="http://phrogz.net/SVG/fetch_fragment.svg" rel="nofollow">another SVG file</a>, uses one technique to manually import one of the nodes and then attempts to use <code>importNode</code> to import another node. One Chrome, Safari, or Firefox you see two grey diamonds imported into the document, while on IE9 only the first diamond works.)</p>
  
  <p>How can I make <code>importNode</code> work with IE9?</p>