Question

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

Answer 1

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

Answer 2

在现代浏览器中，您只需将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>

Answer 3

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

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

带外部Javascript文件的SVG和HTML

3 个答案: