title: Can't find <path> element by its id
body: <p>My goal is to change a <code>fill</code> attribute of a <code>&lt;path&gt;</code> element, upon the loading of a page.</p>
  
  <p>This is the path element:</p>
  
  <pre><code>&lt;path xmlns="http://www.w3.org/2000/svg" 
  style="fill:#ff0000;stroke:#000000;stroke-width:0.26458332px;stroke- 
  linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1" 
  d="M 71.895501,10.754349 94.88068,-28.80154 112.52047,12.892505 Z"
  id="element"/&gt;
  </code></pre>
  
  <p>The path element is located inside of a map.svg file, I load the SVG in my html file, with a <code>&lt;object&gt;</code> element, since I've seen <a href="https://stackoverflow.com/a/4482962/10687744">this</a> answer, I decided to use <code>&lt;object&gt;</code> element.</p>
  
  <h1>index.html</h1>
  
  <p>This is the HTML file:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" dir="ltr"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Dental Ordination&lt;/title&gt;
          &lt;script src="svg.min.js"&gt;&lt;/script&gt;
          &lt;script src="jquery.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;object type="image/svg+xml" data="map.svg"/&gt;
          &lt;script src="main.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h1>main.js</h1>
  
  <p>And this is my JavaScript file:</p>
  
  <pre><code>$(document).ready(function () {
      $("#element").attr("fill", "blue");
  });
  </code></pre>
  
  <p>When executed, paths fill doesn't change. So I tried to debug it, I've put <code>console.log($("#element").attr("fill"));</code>, to see what it returns, and it returned <code>undefined</code>.</p>