Svg

Priya

07-04-2005, 07:28 AM

what i need to do is I should have one textbox named length and whatever i enter the value in that length,that length should be passed to a <line> attribute as parameter..... and the line should change with that value length....

I wrote line.svg as below....

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

<svg width="500" height="400">
<line x1="10" y1="10" x2="490" y2="390" style="stroke:#FF0000; stroke-width:5;"/>
</svg>

and I called this line.svg in my mysvg.html page as below...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body><object data="line.svg" width="500"
height="500" type="image/svg+xml">
<embed src="line.svg" width="500"
height="500" type="image/svg+xml" />
</object>
</body>
</html>

how to pass that length value (textbox) to the <line> tag x1,x2 attributes
so that the line changes accordingly...

Guide me...
priya

Anonymous

07-04-2005, 02:15 PM

1 - give a name to your embed object
<embed src="line.svg" name="MySVG" ..............
2 - give id to your line
<line id="MyLine" .......................
2 - in HTML use
document.MySVG.getSVGDocument().getElementById("MyLine").setAttribute("x1", some value)
document.MySVG.getSVGDocument().getElementById("MyLine").setAttribute("y1", some other value)

This run in IE + ASV3

Michel

Anonymous

07-04-2005, 10:15 PM

hi Michel,

I have changed My html code as follows

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>

<object data="line.svg" width="500"
height="500" type="image/svg+xml">
<embed src="line.svg" name="MySVG" width="500"
height="500" type="image/svg+xml" />
document.MySVG.getSVGDocument().getElementById("MyLine").setAttribute("x2",490)
document.MySVG.getSVGDocument().getElementById("MyLine").setAttribute("y2",390)

</object>
</body>
</html>

and my "line.svg" as..

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

<svg width="500" height="400">
<line id="MyLine" x1="10" y1="10" style="stroke:#FF0000; stroke-width:5;"/>
</svg>

But it didn't work..... it is showing a line of small length... but not as before as x2=490,y2=390 as included in the line tag....

bye.
Priya..

Priya

07-05-2005, 01:31 AM

Anonymous

07-05-2005, 02:27 AM

Here is example where user enter line equation in HTML form and script draw line in svg
( use embed tag )

http://pilat.free.fr/english/svg/droite.htm

You can reuse this code if you want ...

Michel

Priya

07-05-2005, 04:05 AM

Hi Michel,
Really thank u so much for ur help... Thank u so much for clearing my doubt..
Thanks,
Priya