title: JavaScript works with inline svg but not with external linked svg?
body: <p>I do not know how to apply this code for an external svg. </p>
  
  <p>I'm working with Illustrator from where I exported the svg. In HTML, I want to grab the path name of and print it in a tooltip. This works while I use the svg inline. </p>
  
  <p>I tried to read about ways how to implement an external svg the same way, but without any success. Any help what I can do to get the same code to work with an external svg?</p>
  
  <p>With the external svg, I do not even get the mouse position while I hover over the svg anymore</p>
  
  <p>The working HTML code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var myImage = document.getElementsByTagName("path");
  var text = document.getElementById("show");
  
  for (var i = 0; i &lt; myImage.length; i++) {
    myImage[i].addEventListener('mouseover', show);
    myImage[i].addEventListener('mouseout', hide);
  }
  
  function show() {
    var myID = this.id;
    text.innerHTML = myID;
    document.getElementById("show").style.display = "block";
  }
  
  function hide() {
    var myID = this.id;
    text.innerHTML = '';
    document.getElementById("show").style.display = "none";
  }
  
  var tooltipSpan = document.getElementById('show');
  
  window.onmousemove = function(e) {
    var x = e.clientX,
      y = e.clientY;
    tooltipSpan.style.top = (y + 20) + 'px';
    tooltipSpan.style.left = (x + 20) + 'px';
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#show {
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56.69 56.69"&gt;&lt;defs&gt;&lt;style&gt;.cls-1{fill:#1d1d1b;}&lt;/style&gt;&lt;/defs&gt;&lt;g&gt;&lt;path id="Black_Layer" class="cls-1" d="M16,7.7c0.6,0.4-1,1.1-0.9,1.8c0.1,0.5,0.4,1,0.8,1.3c0.6,0.5,1.5,0.6,2.2,0.5c0.8-0.2,1.4-0.7,1.8-1.4c0.1-0.3,0.2-0.6,0.2-0.9C20.1,6.9,17.2,6.8,16,7.7z"/&gt;&lt;/g&gt;&lt;/svg&gt;
  &lt;div id="show" style="position: absolute; left: 100px; background-color:aqua; padding: 5px;"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I replace the svg code with an external svg like this:</p>
  
  <pre><code>&lt;object id='Ebene_1' data="Test-01.svg" type="image/svg+xml" &gt;Your browser doesn't support SVG&lt;/object&gt;
  </code></pre>
  
  <p>With Paul's help i was able to grab the elements of the external SVG, now. Actually it works in Google Chrome, too (maybe i had some cache problems as i thought it wouldn't)</p>
  
  <pre><code>window.onload=function() {
      var a = document.getElementById("Ebene_1");
      var svgDoc = a.contentDocument;
      var myImage = svgDoc.getElementsByTagName("path");
  
  for (var i = 0; i &lt; myImage.length; i++) {
    myImage[i].addEventListener('mouseover', show);
    myImage[i].addEventListener('mouseout', hide);
  }
  
  var text = document.getElementById("show");
  
  svgDoc.onmousemove = function(e) {
    var x = e.clientX,
      y = e.clientY;
    text.style.top = (y + 20) + 'px';
    text.style.left = (x + 20) + 'px';
  };
  
  function show() {
    var myID = this.id;
    text.innerHTML = myID;
    document.getElementById("show").style.display = "block";
  }
  
  function hide() {
    var myID = this.id;
    text.innerHTML = '';
    document.getElementById("show").style.display = "none";
  }
  }
  </code></pre>