Как я могу отправить переменную из встроенного 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>

Как получить переменную'сумма' из SVG в документе HTML?(Примечание. Сценарии в 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

Ответ заключается в том, что вы бы поступили точно так же, как если бы был

Вы можете передавать данные, например, через postMessage или с помощью глобальных переменных или функций в соответствующем объекте окна.

в svg:

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

Затем вы можете прочитать переменную someGlobalVar в основном документе html.Вы также можете вызывать функции, как в этом примере .

Answer 3

Я не думаю, что вы можете определить функции javascript в SVG и вызывать их (по крайней мере, внешне).Тем не менее, вы, вероятно, можете достичь желаемого, определив функцию в файле 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>