我不知道如何将此代码应用于外部svg。JavaScript适用于内联svg,但不适用于外部链接的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";
}
}
对象内容是一个单独的文档,获取该文档并按照您的操作进行。例如。 https://benfrain.com/selecting-svg-inside-tags-with-javascript/ –
我试过了,但没有奏效......其实看起来我不知道如何得到这个单独的文档...我编辑我的文章,这样你就可以看到我做了什么。我也找到了benfrain.com的链接。无法帮助我...我也放松了鼠标移动? – Hirschferkel
您是否在等待'