Talking Documents

Multiple SVG documents on a HTML page sometimes need to send events to each other. This works fine thanks to the global window object. We can access the window object from ECMAScript and use it as an expandable container for custom variables, functions and even objects.

first svg - click red circle

second svg - to enlarge green circle

The HTML file embeds two svg documents: first.svg and second.svg

<html>
  <head>
    <title> interacting svg's </title>
  </head>
  <body>
    <h2>first svg - click red circle</h2>
    <embed src="first.svg" width="300" height="100">
    <hr>
    <h2>second svg - to grow green circle</h2>
    <embed src="second.svg" width="300" height="100">
  </body>
</html>

The first.svg file contains a red circle with an onclick event handler.

<?xml version="1.0" ?>
<svg>
  <circle fill="red" cx="100" cy="50" r="20" onclick="FirstClicked();"/>
  <script>
     function FirstClicked() { window.ChangeSecond(); }
  </script>
</svg>

The second.svg file contains a green circle and a function ChangeSecond, that will be called from within the red circle's onclick event handler. To make the function ChangeSecond accessible from outside, we assign it to the window object via the function Init called by the onload event handler.

<?xml version="1.0" ?>
<svg onload="Init(evt)">
  <circle id="circ" fill="green" cx="100" cy="50" r="20" />
  <script>
     var doc = null;
     function ChangeSecond() { doc.getElementById("circ").setAttribute("r", "40"); }
     function Init(e) { doc = e.getTarget().getOwnerDocument(); window.ChangeSecond = ChangeSecond; }
  </script>
</svg>