Menu
Hello,
Will someone please show me how to script a line that is built with Scalable Vector Graphics. I would like the line to draw itself to the screen. What I mean by that is:
I want an empty page to load, then the svg element would be created and the x2 and/or y2 cooridinates would increment.
For example:
<svg xmlns=”
<line x1=”50″ y1=”50″ x2=”51″ y2=”50″ style=”stroke:rgb(0,0,0); stroke-width:1″ />
<svg>
With the line above, the starting point is 50px from the left and 50px from the top. The “x” axis will increment and the “y” axis will stay at 50 meaning that we’ll draw a horizontal line.
How can we script that? ?
Previously, I was drawing lines using <div> and manipulating CSS height and width. This is awkward due to diagonal lines and such. Then I started using jsDraw2d.js which was going fairly well until I started running into some performance issues. So now, I would like to experiment SVG. However, I am not sure how javascript works with svg. 😮
Will someone please bring me up to speed?