HTML Control - Enter Co-ordinates and Press 'Go':

Example - Controlling SVG from HTML

This project combines two SVG pages embedded in an HTML page. Simple user interfaces in SVG and HTML are used to collect co-ordinates which are then used to reposition an object in an SVG document.

The SVG control text and the SVG graphic are both separate SVG documents embedded in this HTML page.

Javascript is used to communicate between the UI and the SVG object.  This is the process:

Get a pointer to the SVG document:
        var svgdoc=htmldocument.embeds[0].getSVGDocument();

Ask that document for the object using 'O' plus the IMS name 'RedCircle':        
        var marker=svgdoc.getElementById("ORedCircle");

Move the object:
        marker.setAttribute('transform','translate(20,20)');


To download the IMS project for this example click here.  Be sure you have the latest version of   SiteSpinner or Web Engine before viewing the project.