This example illustrates how we can mix controls in HTML and a plot in SVG. The SVG plot is very simple, merely a rectangle. Within the HTML document, we have a choice menu with which the user can select a color (red, green or blue). When a color is selected, a Javascript function (setColor) in the HTML document is invoked and that gets a handle to the SVG document and then gets the rectangle via its id attribute and then sets its color.

The setColor function gets the SVG document object by

  1. accessing the embeds array of the HTML document
  2. calling getSVGDocument() on the generic emebedded object to treat it as an SVG document.
At this point, we are back into regular Ecmascript code we would use within an HTML or SVG document.


Duncan Temple Lang <duncan@wald.ucdavis.edu>
Last modified: Tue Mar 24 15:54:12 PDT 2009