SVG和带外部Javascript文件的HTML

Question

我有一个名为index.html的HTML文件，其中包含了一个svg（使用object-tag）和一个js文件（使用脚本标签）。在HTML文件中调用时，js函数都可以很好地工作。 现在，当我想访问我的svg文件中的一个js函数时，我必须链接到我的svg文件中的js文件（使用xlink）。这些函数在svg文件中仍然有效，但是一旦这些函数引用HTML文件中的任何元素（例如document.getElementById（'div1'）），它们就不再工作了（我的猜测：可能是因为函数不能寻找HTML内部的元素，但在SVG文件内） 我能做些什么来使这些功能再次起作用？

Answer 1

您可以使用顶级或父级对象从svg获取到容器html。有一个完整的svg to container html and container html to svg example with extensive comments here。

Answer 2

当您将一个JS函数嵌入到SVG中时，它们总是在SVG的私有范围内执行，因此无法访问它以外的任何内容。

当你想创建一个带有动态SVG的交互式Web应用程序时，你应该把JS函数修改成HTML代码中的JavaScript代码。您可以通过获取<object>元素的.contentDocument来从嵌入HTML的JavaScript访问SVG文档树。