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

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

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

>在设置参数的地方使用SVG参数
对象标签和参数化
SVG元素的属性.这个
适用于像rect这样的东西,但不是
我需要移动的g(组)(采用无法参数化的“变换”,看起来像).
>我见过使用的建议
contentDocument或getSVGDocument()
在你得到的对象元素上
通过getElementById(“yoursvgid”).
不幸的是,也不是
工作 – 是的,我在称这些
加载SVG后.

我无法相信没有简单/可靠的方法来从HTML中搜索SVG元素(在这里搜索/ web) – 真的很感谢这方面的帮助！

或者,如果有某种方法可以在HTML中调用SVG内部定义的函数(反之亦然),那也是这样做的.通常,在SVG和HTML之间进行通信的任何方式.

解决方法

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

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

<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加载事件处理程序中,通过内置父变量写出需要向HTML端脚本公开的内容.

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

>回到HTML端脚本,您现在可以直接访问和使用此引用.

var svgDocument = theSvgDocument;

在此示例中,我们公开了SVG Document对象,但您可以传递任何对象或函数.在我的项目中,我实际上暴露了某种控制器对象引用,以便我的SVG端脚本包含操作SVG文档的所有逻辑,而HTML端脚本只是抓取这个控制器对象并在其上调用公共方法.

原文地址：https://www.jb51.cc/html/232396.html