Question

我使用此代码将SVG嵌入到HTML文档中

<embed src="circle.svg" type="image/svg+xml" />

在SVG文件中，我得到了一个像这样的脚本块

<svg onload="myFunction()">
<script  type="text/javascript">
<![CDATA[
    function myFunction() {
        var sum;
        sum = 5 + 3;
    }
]]>
</script>
</svg>

如何在HTML文档中从SVG获取变量'sum'？（注意：SVG中的脚本比简单的总和复杂得多，但我不想用代码重载这个问题）

Answer 1

有一项工作。我不知道这个问题有多久了，但有人会使用它。

在SVG文件中。

<svg onload="myFunction()">
<script  type="text/javascript">
<![CDATA[
    function myFunction() {
        var sum;
        sum = 5 + 3;
    }
    if(window.parent.svgLoaded) window.parent.svgLoaded(this);
]]>
</script>
</svg>

在嵌入的HTML文件上。

<script>
    var svgScript;
    function svgLoaded(script){
        alert("gotcha!")
        svgScript = script;
    }
    function onPlayPause(){
        svgScript.myFunction();
    }
</script>

有效。

Answer 2

我认为你不能在SVG中定义javascript函数并调用它们（至少在外部）。但是，您可以通过在HTML文件中而不是在SVG中定义函数来实现所需的功能。例如，如果要计算给定SVG中的所有矩形，可以使用如下代码：

<embed id="mySVG" src="circle.svg" type="image/svg+xml" onload="countRectangles();"/>
<script>
  function countRectangles()
    {
      var svg = document.getElementById("mySVG").getSVGDocument();
      var allRectangles = svg.getElementsByTagName("rect");

      var result = allRectangles.length
      alert(result);
      return result;
    }
</script>

Answer 3

答案是，你的确会像＆lt; embed＆gt;一样是＆lt; iframe＆gt;其中的文档是HTML文档。

您可以传递数据，例如通过postMessage，或者使用相应窗口对象上的全局变量或函数。

在svg：

中

function foo() {
  var parentWindow = window.parent;
  parentWindow.someGlobalVar = 47;
}

然后你可以阅读html主文档中的someGlobalVar变量。您也可以调用函数，如this example。

如何将嵌入式SVG中的变量发送到HTML文档？

3 个答案: