如何从 svg 中获取嵌入元素答案

【问题标题】：How to get the embedding element from inside an svg如何从 svg 中获取嵌入元素
【发布时间】：2012-11-26 09:09:53
【问题描述】：

使用 mySVGNode.parentNode 我得到一个嵌入的 svg 文件的空值。理想情况下，我想引用 embed 标记及其 id 属性。

我可以成功地在 DOM 中搜索它，但我很惊讶 parentNode 返回 null。嵌入对象不支持吗？

【问题讨论】：

一些代码会有所帮助，当您使用parentNode 时，可能mySVGNode 尚未附加到DOM 树？
我不确定这是否属实，因为我不擅长阅读 w3 规范，但看起来 parentNode 的 SVG 元素在实例树中引用它们的父级......所以最顶层不会有父级。 w3.org/TR/SVG11/… .....我确定我只是读错了
Ta Ian，为我指出了这些规格。我不认为它的SVG是问题。我查看了嵌入标签，我认为（！...）它暗示嵌入的对象可能是一个孤儿，这意味着它没有父对象。
@ian：是的，你读错了。该接口适用于元素阴影树，而不适用于元素。

标签： javascript html dom svg

【解决方案1】：

window.frameElement 是要走的路，正如@Eric 所说，但不幸的是它在 IE 或 Edge 中不起作用。

但是有一种解决方法，即获取父文档，在其中找到 <object> 或 <embed> 标签（可能引用您的 SVG），然后检查每个标签是否包含 @987654325 @ 是我们的 SVG 文档。

与通过 ID 进行常规 DOM 搜索不同，这避免了为您的对象/嵌入标签分配唯一 ID 的需要。

例子：

var objectElt = window.frameElement;
if (!objectElt) { // IE/Edge case
    var objectElts = window.parent.document.getElementsByTagName("object");
    for (var i = 0; i < objectElts.length; i++) {
        if (objectElts[i].contentDocument == document) {
            objectElt = objectElts[i];
            break;
        }
    }
}
// objectElt now references the appropriate <object> tag

【讨论】：

令我惊讶的是，即使在同一个 SVG 对象在同一个 HTML 文档中多次嵌入的情况下，这似乎也能很好地检索正确的节点元素（请赞成！）...还希望也许您是可以对此提供答案的人？ stackoverflow.com/questions/54771696/…

【解决方案2】：

您正在寻找的是window.frameElement。请参阅html5 spec 中的定义。

这是example。

【讨论】：

寻求帮助。我看了一下，可能我错过了阅读它。据我所知，如果您使用窗口对象（或 iframe 或对象）作为容器，则此方法有效。同时，我使用嵌入标签作为容器（这可能是问题的一部分？）。使用 mySVGNode.frameElement 返回未定义的结果。
你误读了。您应该使用 window.frameElement 从 svg 文档内的脚本中获取元素。 SVGSVGElement DOM 接口没有 frameElement 属性。
太棒了，谢谢。非常感谢，尤其是示例。
frameElement 似乎在 IE 中为 <object> 和 <embed> 返回 null。有什么建议的解决方法吗？
@MaxStarkenburg 查看我对这个问题的新答案，它可以解决您的问题。