SVG and Javascript

Hello,

First thing: I run Windows Server 2003 and check all my work from the internet on another PC running Windows Vista Ult and IE9.

I am trying get going with some SVG. Ok, I understand the points, and polygons, and I am aware of the annimate attribute.

What I need is a bit more explanation than provided at w3schools about how to set up the document. What I mean, is this:

Can we bind to an SVG document like we do to an XML document?

I have the following svg document with a line:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg>

<line x1="10" y1="450" x2="490" y2="450" style = "stroke:rgb(0,0,0); stroke-width:"1"></line>

</svg>

I am hoping to keep this file external in the same folder as my webpage and retrieve the elements using javascript through some sort of binding or linking.

What I have done to be able to view a page with the line specified above is give the file an ".asp" extension. Ok, cool! :cool:

I am hoping to be able to keep my XHTML Page on which I have a centered <div> tag (width: 500px; height: 500px; margin-left: auto; margin-right: auto; ). I want to draw my graphics to that area. Again, I am hoping to keep what I currently have. If I have to use the "canvas" and HTML5 I will.

Ok, so all I want to be able to do, is find out how to link to the page externally and access the elements from javascript.

Can we do it the way we use external .js and .css files in the head of the document? :confused: That sure would be nice!

In a nutshell, I want to create an SVG file with all my points and lines and shapes, but call for the elements and attributes using javascript from the actual web page. Just like if I wrote a bunch of javascript functions in an external .js file and then called the functions from the XHTML page.

Additionally, if someone could script my line as an example, that would be great! Like:

Can we add an "id" attribute to the SVG line?

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg>

<line id="line1" x1="10" y1="450" x2="11" y2="450" style = "stroke:rgb(0,0,0); stroke-width:"1"></line>

</svg>

And if so, can we then do something like this:

<script type="text/javascript'>

Function Draw(xx){
var line1 = document.getElementById('line1');
var c = (xx);
var clr
c = 11;
line1.x2 = c;
c++;
setTimeout(function(){Draw(xx)},10; )
if (c > 490){
clr = clearTimeout(Draw(xx));
}
}


</script>

I am just throwing that script out there to give the gist of what I am trying to do. There may be something syntactically wrong with it that particular script but those are the types of functions I was using to draw lines to the screen using javascript with HTML and CSS.

Any help at all will be appreciated....


Thanks in advance... :D