Javascript SVG嵌入未加载或无法通过contentDocument访问_Javascript_Html_Svg

Javascript SVG嵌入未加载或无法通过contentDocument访问

javascript html svg

Javascript SVG嵌入未加载或无法通过contentDocument访问,javascript,html,svg,Javascript,Html,Svg,我一直在为。。。关于一个简单问题的几个小时，尽管这里似乎已经描述过：我无法访问嵌入标记中加载的外部svg文件的元素，即使我等待加载div或整个窗口（我尝试了几个“加载侦听器”）我已将html文件简化为以下几行，以向您展示问题： <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0

我一直在为。。。关于一个简单问题的几个小时，尽管这里似乎已经描述过：

我无法访问嵌入标记中加载的外部svg文件的元素，即使我等待加载div或整个窗口（我尝试了几个“加载侦听器”）

我已将html文件简化为以下几行，以向您展示问题：

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Desperate demo</title>   
</head>
<body>

<div id="content">
    <embed class="emb" id="maptest" type="image/svg+xml" src="star.svg">
</div>
<script type='text/javascript'>
window.onload = initAll;
function initAll(){
    var mySVG = document.getElementById("maptest");
    var svgDoc = mySVG.contentDocument;
    console.log(svgDoc);
}
</script>
</body>
</html>


绝望的演示
window.onload=initAll；
函数initAll（）{
var mySVG=document.getElementById（“maptest”）；
var svgDoc=mySVG.contentDocument；
console.log（svgDoc）；
}

基本上，日志在contentDocument属性调用时返回“null”或“undefined”，就好像DOM中根本没有加载svg一样

你能看到我错过了什么吗？如果我在html中编写整个svg标记，而不是调用外部文件，这也不起作用…

试试

getSVGDocument（）

，看看它是否有助于您：

window.onload = initAll;
function initAll(){
    var mySVG = document.getElementById("maptest");
    console.log(mySVG);
    var svgDoc = mySVG.getSVGDocument();
    console.log(svgDoc);
}

哦，是的，它似乎起作用了！奇怪，因为我很确定我在另一个版本上试过。无论如何，非常感谢！你能教我getsvgdocument（）和contentDocument这两个家伙之间的区别吗？@CedricB很高兴它起作用了。据我所知，它们的用法应该是等效的，对于getSVGDocument，您只需要确保有一个svg。contentDocument应该适用于或，因此另一种方法可能是用这两个标记替换。在我的例子中，我是通过jquery将svg作为对象附加的，并尝试使用jquery元素[0]来实现这一点，它显然没有到达附加到html中的实际元素。但引用附加元素的新id仍然有效。