javascript - 如何在 DOM 中获取嵌入式 svg 的父元素？

Question

在 DOM 中，可以使用 getSVGDocument() 向下遍历嵌入的 SVG 元素。例如，对于这样的 HTML 文档:

<div id="container">
    <embed id="svg-wrap" src="pic.svg"></embed>
</div>

我可以通过这样做来访问 SVG 本身的结构:

var svg_wrap = document.getElementById("svg-wrap");
var svg = svg_wrap.getSVGDocument();

我如何反转它并从 SVG 元素转到封闭的 embed 和 div 元素？至少在 Chrome 43.0.2357.81 中，正常的 DOM 遍历方法在 SVG/HTML 边界不起作用。对于上下文，我想要这个以便我可以计算 SVG 元素在页面上的位置。

Answer 1

使用类似于 document.getElementById() 的东西从 SVG 本身内部无法访问“主”文档结构中的节点(放置“svg-wrap”嵌入元素的 HTML)，因为嵌入的 SVG 文档内容就像“隔离”，所以你只能直接访问 SVG 结构本身中的节点元素。如果 SVG 与“主”HTML 文档相比具有相同或不同的来源(例如不同的域)，这总是正确的。

也就是说，幸运的是，如果 HTML 文档和嵌入的 SVG 共享同一来源，并且它使用的是 window.frameElement，则有一种方法可以实现您的需要。 ，例如，像这样:

var svg_wrap = window.frameElement;
var svg = svg_wrap.contentDocument;

注意

Despite the name, frameElement also works for documents embedded using <object> or <embed>

Cit., see: https://developer.mozilla.org/en-US/docs/Web/API/Window/frameElement

它是well supported in modern browsers .