title: Object tag loads SVG but its Content Document is null
body: <p><strong>Issue Summary:</strong> </p>
  
  <p>I have successfully loaded an SVG onto my page using the <code>&lt;object&gt;</code> tag but I am still unable to access it's inner elements with javascript. It doesn't seem to be a CORS issue since the SVG is successfully loaded on the page, <em>however</em> if I load the same asset from my own domain and then run the same javascript I do not get the error detailed below.</p>
  
  <p><strong>Example Fiddle:</strong>
  <a href="http://jsfiddle.net/3ga8bhj6/" rel="nofollow noreferrer">http://jsfiddle.net/3ga8bhj6/</a></p>
  
  <hr>
  
  <p><strong>Code:</strong> </p>
  
  <p>I have the following code to load an SVG via an object tag: (from a CORS enabled source)</p>
  
  <pre><code>&lt;object type="image/svg+xml" data="https://example.com/logo.svg"&gt;&lt;/object&gt;
  </code></pre>
  
  <p>This successfully loads the SVG onto the webpage. I can see the SVG code embedded into the page as well:</p>
  
  <pre><code>&lt;object type="image/svg+xml" data="https://example.com/logo.svg"&gt;&lt;/object&gt;
    #document
      &lt;svg xmlns="http://www.w3.org/2000/svg"&gt;
        &lt;rect xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="100%" height="100%"/&gt;
         ...
  </code></pre>
  
  <p>I want to be able access the SVGs DOM via Javascript. I start with the following code:</p>
  
  <pre><code>var svgDom = $("object")[0].contentDocument.documentElement;
  </code></pre>
  
  <p>This throws the following error in the browser when run:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'documentElement' of null
  </code></pre>
  
  <p>Is there something beyond CORS which is preventing me from accessing the objects inner content? Any ideas on how to troubleshoot this further would be greatly appreciated.</p>