从主 html 脚本调用 SVG 的外部 JavaScript 函数？

【问题标题】：Call SVG's external JavaScript function from the main html script?从主 html 脚本调用 SVG 的外部 JavaScript 函数？
【发布时间】：2017-08-24 06:54:23
【问题描述】：

这是一个类似的问题，但我想知道当 SVG 的 JavaScript 函数没有嵌入而是从外部文件导入时如何访问它们：

Call svg javascript function inside html javascript function

所以，我会尽量把我的问题说清楚，希望不要太复杂。

我有 main.html 和 main.js。

我还有 someSVG.svg，它导入了 someSVG.js，它有一个函数 foo()。

main.html 将 someSVG.svg 作为对象元素导入。

如何从 main.js 调用 foo()？

【问题讨论】：

为 someSVG.js 创建对象，就像这样 var some = new SomeSVG() 并调用 some.foo()

标签： javascript svg

【解决方案1】：

如果你嵌入了带有<object>标签的SVG，你就可以访问SVG的window对象

var inner = document.querySelector('object').contentWindow

就像外部窗口的窗口对象一样，它提供了您在普通窗口中可以找到的所有全局变量，例如脚本定义的inner.foo() 或inner.document。

注意：Safari 从版本 10 开始支持 HTMLObjectElement.contentDocument，但不支持 .documentWindow。

【讨论】：

SVG 也必须是同源或可访问 CORS。
@TheBlueCrayon 想发表评论，但由于缺少声誉而无法发表评论。他留下了一个编辑。以下是全文： Safari 不支持 HTMLObjectElement.contentWindow 用于 svg 元素。使用此simplified test case 在 Mac 和 iOS 的 Safari 11 及更早版本中进行了测试。 HTMLObjectElement.contentWindow 根本不包含在apple developer documentation 中。