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 的元素。实际上它也适用于谷歌浏览器(也许我有一些缓存问题，因为我认为它不会)

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

您永远无法实现这一目标，因为收集 SVG 形状的唯一方法是通过内联 svg。请阅读本文，您将了解浏览器中 SVG 的基本概念。 https://css-tricks.com/using-svg/

此外，如果您不想修改代码，我会推荐 SVG Injector https://github.com/iconic/SVGInjector , 转换你的 <img src="file.svg" > 即时内联 SVG。 通过这样做，您的代码将相应地工作。