|
Setting Up the User Interface
Figure 1 shows one type of effect you can achieve.
In this example, the user has drawn four lines as input. The sample combines the user-drawn lines with the yellow boxes so that the user's drawing has some kind of semantic or application meaning. It's all about "gesture recognition", where the user's mouse movement is a gesture that translates ultimately into data.
Capturing gestures takes a little planning. Figure 2 shows all the graphical elements you'll need.
The sample code doesn't perform any dynamic tag insertion, as you might be accustomed to doing with dynamic HTML. It's entirely possible to insert tags dynamically, but in this case, you know by design that the user can create more than four lines (one for each item on the right), so you can pre-create the four lines tags. The four data items (data1, data2, etc.) store the user input.
Listing 1 (step1.svg) shows the basic SVG document that creates this diagram.
If you are new to SVG you might want to study this page a little—note how SVG supports styles. In plain HTML you can extract most numeric information such as point sizes and screen positions out of tags and into style sheets. In SVG, however, you can't extract screen position to styles—it's fundamental to every tag. Also, this is pure XML not some XHTML variant—so watch out—all the SVG tags are defined as lowercase, and you must close all tags and quote all attribute values. The XML parser that reads your SVG is strict and gives almost no error information, so be warned. It looks to me like a purposeful omission; Adobe wants you to buy their graphical tools that auto-generate correct SVG rather than help you hand-code it as done here.
To view this page wrapped up in HTML, use a document such as this:
<HTML><HEAD></HEAD>
<BODY>
<EMBED SRC="step1.svg" HEIGHT="400" WIDTH="500" TYPE="image/svg-xml">
</BODY>
</HTML>
By using the <EMBED> tag, which is deprecated by the latest HTML spec, and not including a <!DOCTYPE> tag, you abandon any commitment to standards, but the <EMBED> tag reaches the widest audience—it's the users who matter here, not the standards.
|
|
 |
TALK
BACK |
|
Are you already working with SVG? Are you using the Adobe plugin? SVG is not a browser-specific technology. Are you aware of or interested in SVG development work for PDAs and cell phones? Let us know in the web.dhtml.general discussion group.
|
|
|
|
|
|
|
Shopping for Technology 
Setting Up the User Interface 
Capturing user input 
Scripting Dynamic SVG 
