Svg Variables

[charlesduncan]

The following is very simple svg code representing four lines roughly in the shape of a box. What i would like to do is have the user ethier select choices in a puldown or enter text in a text box and then have what they entered/chose become a variable value that would be used in place of the linex or color values in the svg file. For example if the user entered 120 in a text box, than line x1 value would now be 120 instead of 94.

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="765" height="417">
<line x1="94" y1="67" x2="635" y2="73"


style="fill:rgb(0,0,255);stroke:rgb(0,0,0);stroke-width:2"/>
<line x1="665" y1="97" x2="641" y2="326"


style="fill:rgb(0,0,255);stroke:rgb(0,0,0);stroke-width:2"/>
<line x1="541" y1="356" x2="106" y2="273"


style="fill:rgb(0,0,255);stroke:rgb(0,0,0);stroke-width:2"/>
<line x1="100" y1="109" x2="59" y2="232"


style="fill:rgb(0,0,255);stroke:rgb(0,0,0);stroke-width:2"/>
</svg>

[jkd]

You're going to need to use DOM scripting to achieve this. No biggie, just gain element references and setAttribute('x1', newVal) on the boxes.

As for providing form-based input, you may have to make use of the <foreignObject> and embed some inline XHTML.