svg - 是否可以从封闭的 HTML 中导航 SVG 对象的元素？

Question

我正在通过对象标签加载 SVG，并且需要访问 SVG 的元素(以操作它们)。我怎样才能做到这一点？

这是我知道的部分解决方案:

在设置参数的地方使用 SVG 参数
为对象标签和参数化
SVG 元素的属性。这
适用于 rect 之类的东西，但不适用于
我需要移动的 g (组)(它需要一个无法参数化的“变换”，看起来像)。

我已经看到了使用建议
contentDocument 或 getSVGDocument()
在你得到的对象元素上
通过 getElementById("yoursvgid")。
不幸的是，两者都不是
工作 - 是的，我调用这些
加载 SVG 后。

我不敢相信没有简单/可靠的方法可以从 HTML 中访问 SVG 元素(在此处搜索/网络)-非常感谢您的帮助!

或者，如果有某种方法可以从 HTML 中调用 SVG 中定义的函数(反之亦然)，那也可以。一般来说，SVG 和 HTML 之间的任何通信方式。

Answer 1

这是我成功使用的一种技术，在(非常好的)O'Reilly “SVG Essentials”一书中提到:

将 JavaScript 代码添加到 SVG 文档本身并处理根 svg 元素上的加载事件。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="init(evt)">
<script type="text/ecmascript" xlink:href="svgScript.js" />

在这个 svgScript.js 加载事件处理程序中，通过内置的 parent 写出您需要向 HTML 端脚本公开的任何内容多变的。

function init(evt) {
    svgDocument = evt.target.ownerDocument;
    parent.theSvgDocument = svgDocument;
}

回到您的 HTML 端脚本，您现在可以直接访问和使用此引用。

var svgDocument = theSvgDocument;

在此示例中，我们公开了 SVG Document 对象，但您可以传递任何对象或函数。在我的项目中，我实际上公开了某种 Controller 对象引用，以便我的 SVG 端脚本包含操作 SVG 文档的所有逻辑，而 HTML 端脚本仅获取此 Controller 对象并在其上调用公共(public)方法。