我想在文件加载后访问 svg 的 id 及其路径以供交互使用。我使用函数加载 SVG 并将节点导入到 DOM。在 document.ready 和 document.addEventListener("DOMContentLoaded", function(event) 中，我都无法通过元素的 id 获取元素。获取它的唯一方法是围绕交互代码设置超时。
我想要的是 SVG (900kb) 及其 DOM 应在加载所有其他代码之前加载。但直到现在我还没有找到合适的解决方案。
我很困惑，因为如果我用 firebug 查看浏览器中的 DOM，我可以看到带有 ID 的 div，但我看不到它......而且我在代码中找不到问题，因为我加载了它在 DOM 中并在 DOM 准备好后访问它？ 这里有人找到解决方案吗？
这是我加载 svg 的代码:
function fetchXML (url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function (evt) {
if (xhr.readyState === 4) {
callback(xhr.responseXML);
}
};
xhr.send(null);
};
fetchXML("svg/bez_grey.svg",function(newSVGDoc){
var n = document.importNode(newSVGDoc.documentElement,true);
var mysvg = document.getElementById("map");
mysvg.appendChild(n);
})
document.addEventListener("DOMContentLoaded", function(event) {
// Access the SVG-Elements here
}):
最佳答案
在调用 var mysvg = document.getElementById("map"); 之前，您需要先调用 document.documentElement.appendChild(n);。这会将 n 加载到 document 的 DOM 中。您可以删除语句mysvg.appendChild(n);
此解决方案基于此处的工作代码示例:https://stackoverflow.com/a/3378320
关于javascript - 无法通过 ID 访问 SVG，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28682214/