[英]JavaScript works with inline svg but not with external linked svg?
我不知道如何将此代码应用于外部svg。
我正在从导出svg的地方使用Illustrator。 在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的要素。 实际上,它也可以在Google 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";
}
}
您将永远无法实现这一目标,因为收集SVG形状的唯一方法是通过内嵌svg。 请阅读本文,在这里您将了解浏览器中SVG的基本概念。 https://css-tricks.com/using-svg/
另外,如果您不想修改代码,我建议您使用SVG Injector https://github.com/iconic/SVGInjector ,它可以将您的<img src="file.svg"
> <img src="file.svg"
转换为嵌入式SVG。 这样,您的代码将可以正常工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.