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

【问题标题】：SVG embed not loaded or unaccessible via contentDocumentSVG 嵌入未加载或无法通过 contentDocument 访问
【发布时间】：2017-02-05 18:31:27
【问题描述】：

我已经为一个简单的问题苦苦挣扎了好几个小时，尽管这里似乎已经描述了它：How to access SVG elements with Javascript

我无法访问加载到嵌入标签中的外部 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>

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

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

【问题讨论】：

标签： javascript html svg

【解决方案1】：

试试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 应该适用于或 <object>，因此替代方法可能是将 <embed> 替换为这两个标签。</embed></object>
就我而言，我通过 jquery 将 svg 作为对象附加并尝试使用 jquery 元素 [0] 执行此操作 - 这显然没有达到附加到我的 html 的实际元素.不过，引用附加元素的新 id 是可行的。