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

以下怎么样？将它传递给SVGDocument，它将在包含它的页面上返回嵌入。

从那里你可以使用embedElem.parentNode获得DIV。

function getEmbedFromSVG(svg)
{
  var allEmbeds = document.getElementsByTagName("embed");
  for (var i=0; i < allEmbeds.length; i++) {
    if (svg === allEmbeds[i].getSVGDocument())
      return allEmbeds[i];
  }
  return null;
}

Answer 2

在SVG内部使用document.getElementById()之类的内容无法访问“主”文档结构（放置了“ svg-wrap”嵌入元素的HTML）中的节点，这会导致嵌入SVG文档的内容就像“分开”一样，因此您只能直接访问SVG结构本身中的节点元素。如果SVG与“主要” HTML文档相比具有相同或不同的来源（例如，不同的域），则始终都是这样。

这就是说，很幸运，如果HTML文档和嵌入式SVG具有相同的来源，并且您使用的是window.frameElement，有一种方法可以实现所需的功能，例如，像这样：

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

请注意

尽管名称frameElement也适用于使用<object>或<embed>嵌入的文档

引用。请参阅：https://developer.mozilla.org/en-US/docs/Web/API/Window/frameElement

它是well supported in modern browsers。

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

2 个答案: