javascript - 带有外部 Javascript 文件的 SVG 和 HTML

Question

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

Answer 1

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

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

Answer 2

您可以使用顶部或父对象从 svg 获取容器 html。这里有一个完整的svg 到容器 html 和容器 html 到 svg 示例，这里有大量注释。

Answer 3

在现代浏览器中，您可以简单地将 svg 直接放在 HTML 中，JS（和 CSS）将在两者上无缝运行。

<div>
  <svg:svg xmlns:svg="www.w3.org/2000/svg" version="1.1" height="100" width="100" viewBox="0 0 100 100">
    <svg:circle id="circle" cx="50" x="50" y="50"/>
  </svg:svg>
</div>

<script>
    document.getElementById("circle").style.fill="red";
</script>