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文檔樹。