JavaScript works with inline svg but not with external linked svg?

Question

I do not know how to apply this code for an external svg.

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.

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?

With the external svg, I do not even get the mouse position while I hover over the svg anymore

The working HTML code:

 var myImage = document.getElementsByTagName("path"); var text = document.getElementById("show"); for (var i = 0; i < 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'; }; 

 #show { display: none; } 

 <svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56.69 56.69"><defs><style>.cls-1{fill:#1d1d1b;}</style></defs><g><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"/></g></svg> <div id="show" style="position: absolute; left: 100px; background-color:aqua; padding: 5px;"></div> 

When I replace the svg code with an external svg like this:

<object id='Ebene_1' data="Test-01.svg" type="image/svg+xml" >Your browser doesn't support SVG</object>

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)

window.onload=function() {
    var a = document.getElementById("Ebene_1");
    var svgDoc = a.contentDocument;
    var myImage = svgDoc.getElementsByTagName("path");

for (var i = 0; i < 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";
}
}

Answer 1

You'll never be able to achieve that as the only way to gather the SVG shapes is through inline svg. Please read this article where you'll understand the basic concepts of SVG in the browser. https://css-tricks.com/using-svg/

Also, in case you do not wish to modify your code I would recommend SVG Injector https://github.com/iconic/SVGInjector , which converts your <img src="file.svg" > to inline SVG on the fly. By doing this, your code will work accordingly.