我正在通过对象标签加载 SVG,并且需要访问 SVG 的元素(以操作它们)。我怎样才能做到这一点?
这是我知道的部分解决方案:
为对象标签和参数化
SVG 元素的属性。这
适用于 rect 之类的东西,但不适用于
我需要移动的 g (组)(它需要一个无法参数化的“变换”,看起来像)。
contentDocument 或 getSVGDocument()
在你得到的对象元素上
通过 getElementById("yoursvgid")。
不幸的是,两者都不是
工作 - 是的,我调用这些
加载 SVG 后。
我不敢相信没有简单/可靠的方法可以从 HTML 中访问 SVG 元素(在此处搜索/网络)-非常感谢您的帮助!
或者,如果有某种方法可以从 HTML 中调用 SVG 中定义的函数(反之亦然),那也可以。一般来说,SVG 和 HTML 之间的任何通信方式。
最佳答案
这是我成功使用的一种技术,在(非常好的)O'Reilly “SVG Essentials”一书中提到:
<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" />
parent
写出您需要向 HTML 端脚本公开的任何内容多变的。function init(evt) {
svgDocument = evt.target.ownerDocument;
parent.theSvgDocument = svgDocument;
}
var svgDocument = theSvgDocument;
在此示例中,我们公开了 SVG Document 对象,但您可以传递任何对象或函数。在我的项目中,我实际上公开了某种 Controller 对象引用,以便我的 SVG 端脚本包含操作 SVG 文档的所有逻辑,而 HTML 端脚本仅获取此 Controller 对象并在其上调用公共(public)方法。
关于svg - 是否可以从封闭的 HTML 中导航 SVG 对象的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4911525/