带有外部Javascript文件的SVG和HTML

我有一个名为index.HTML的HTML文件，其中包括一个svg（使用object标记）和一个js文件（使用script标记）。当在HTML文件中调用js函数时，所有函数都能完美工作。 现在，当我想访问svg文件中的一个js函数时，我必须链接到svg文件中的js文件（使用xlink）。这些函数仍然在svg文件中工作，但是一旦这些函数引用HTML文件中的任何元素（例如document.getElementById（'div1'）），它们就不再工作了（我猜：可能是因为函数没有在HTML中查找元素，而是在svg文件中查找）

---

如何使这些函数再次工作？

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

---

当您想要创建一个带有动态SVG的交互式web应用程序时，应该将修改SVG的JS函数放在HTML的javascript代码中。您可以通过获取

元素的

.contentDocument

从HTML嵌入的javascript访问SVGs文档树。

您可以使用顶部或父对象从svg获取容器HTML。在现代浏览器中，您可以简单地将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>

document.getElementById（“圆圈”）.style.fill=“红色”；

svg在使用时是一个单独的文档，但只要父文档不是跨源文档，就可以访问svg之外的函数<从svg文档调用的code>window.parent.document将为您提供父html文档。类似问题：。