UpDating SVG

I have a page that uses an SVG graphic containing a line. I update the position of the line via JavaScript, but I would like to suspend SVG from redrawing until I have updating all the coordinates.

Who is Participating?
Pravin AsarPrincipal Systems EngineerCommented:
As I said, implementing this is easy.

In my code, since I am rubberbanding, I create an element and with mousemove the the elements attributes are upated.

Look the Draw() function

// Code Snippet for Line
if (get_entity() == 1) {
                     if (bothPoints == 0) {
                           x1 = getClientX(evt);
                           y1 = getClientY(evt);
                           bothPoints =1;
                           drawLine (doc, x1, y1, x1, y1);
                     else {
                           x2 = getClientX(evt);
                           y2 = getClientY(evt);
                           newElem.setAttribute('x2', getClientX(evt));
                           newElem.setAttribute('y2', getClientY(evt));
                           bothPoints =0;

Here is use flag named "bothPoints" to decide if all required attributes are entered.
When bothPoints == 0, first point is recorded and line with zero length is created and flag is toggled to bothPoints = 1
So next mouse down/click event
Once both captured (desired x2, y2) and the element is finalized.

IF you do not want the rubberbanding,
With first mouse click/down event, you  save x1, y1 and set the bothPoints = 1
So now when next mouse down/click event happens, you will save x2, y2 and create an element. and set the bothPoints=0.
By this way you are making sure you have required attributes to create geometry element.

If I were you, I will keep the rubberbanding effect, as this provides constant feedback to user, where is First Point, and where is current position of the mouse.

Pravin AsarPrincipal Systems EngineerCommented:
You can get the SVG object via document.getElementById() call and update the attributes of the elements

e.g. For line it is x1, y1, x2, y2

For Simple example see,


See the RubberBanding function implementation while drawing
sidwelleAuthor Commented:
yeah, that changes the properties, but it does not suspend drawing before the other props are updated.

'In VB you could:
Elem.setAttribute('x') = myX
Elem.setAttribute('y') = myY
'Now it paints ...
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Pravin AsarPrincipal Systems EngineerCommented:
To Suspend Drawing while properties are getting updated....Not a big deal.

It is a matter a ignoring the user inputs.

Can be done simply by managing a flag (such as drawFlag true/false). and plugging at the  appropriate place within your code.

if (drawFlag == false) { return; }

sidwelleAuthor Commented:
I am not very clear on the "drawFlag"  Is this a property that SVG exposes that you can set ?
or just a var to set so that user input is not accepted while drawing ?

//when I execute the following:
Elem.setAttribute('x') = myX      //The X coordinate of the object immediately moves to position myX
Elem.setAttribute('y') = myY     //The Y coordinate moves to position myY

/* The element moved to two different positions:
original location:  oldX, oldY
1st position:           myX, oldY
2nd position:          myX, myY
Pravin AsarPrincipal Systems EngineerCommented:
drawFlag is variable you will have your code.

for line element the atrributes are x1, y1, x2, y2

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

<svg width="100%" height="100%" version="1.1"

<line x1="0" y1="0" x2="300" y2="300"

sidwelleAuthor Commented:
I don't see where you have shown how to suspend drawing until all the attributes are entered ?

sidwelleAuthor Commented:
thanks for the help.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.