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

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

答案是，您将完全像<embed>是<iframe>并且其中的文档是HTML文档一样进行操作。

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

在svg中：

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

然后，您可以阅读html主文档中的someGlobalVar变量。 您也可以调用函数，如本例所示 。

Answer 3

我认为您无法在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>