JavaScript適用於內聯svg，但不適用於外部鏈接的svg？

Question

我不知道如何將此代碼應用於外部svg。

我正在從Illustrator中導出svg。在HTML中，我想獲取路徑名並在工具提示中打印。這在我使用svg內聯的情況下工作。

我試圖閱讀有關如何以同樣的方式實現外部SVG的方式，但沒有任何成功。任何幫助我可以做什麼來獲得相同的代碼與外部svg工作？

隨着外部SVG，我甚至不獲取鼠標位置，而我將鼠標懸停在SVG不再

工作HTML代碼：

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>

當我更換svg代碼與這樣的外部svg：

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

有了Paul的幫助，我現在可以抓住外部SVG的元素。其實它在谷歌Chrome，太（也許我有一些緩存出現了問題，因爲我認爲這不會）

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"; 
} 
}