Capturing user input
The code in Listing 1 causes the SVG viewer to display the diagram, but it's not interactive. To give users the capability of drawing lines on top of the diagram, you use the same event handlers as for HTML. SVG supplies a grouping tag <g> that can contain multiple diagram elements. Any event falling within the group can be captured by the <g> tag, just as for a <div> or <span> tag in HTML. You'll also need a tag covering the whole background of the diagram canvas that will fire onmousemove events that may occur anywhere on the diagram.

For complex operations, you would want to create a state diagram of all the SVG elements to determine which event handlers are required; however, this simple example requires only a Boolean decision—the user interface is either in or out of line drawing mode. The UI changes to line drawing mode when you click and drag while the cursor is over any of the right-hand yellow boxes. The code stops drawing the line when you release the mouse button while the cursor is over any of the left-hand yellow boxes. The line changes orientation and size dynamically as you move the mouse. Almost every other input halts line drawing mode.

You need to hide the elements (the lines) that should not appear when the page starts and also those that should never be visible (the data items). Listing 2 (step2.svg) shows the unwritten event handlers installed everywhere they are needed, plus some extra styles. The user interface at startup now looks like Figure 3.

In a Web page, users can highlight and copy displayed text; that capability extends to SVG <text> elements too. But you don't want users to suddenly highlight text if they're trying to draw a line. You can avoid that problem using the SVG-specific style property pointer-events: none.

This marks a change from current style usage in HTML pages: this property is not part of the CSS2 specification, and SVG styles aren't identical to CSS2 styles. You should study the SVG standard to explore its style property support. New style properties such as pointer-events are very handy.

Setting Up the User Interface

Scripting Dynamic SVG

Shopping for Technology	Setting Up the User Interface
Capturing user input	Scripting Dynamic SVG