[Last Call] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 273
  • Last Modified:

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.

  • 4
  • 4
1 Solution
Pravin AsarCommented:
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 ...
Pravin AsarCommented:
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; }


Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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 AsarCommented:
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 ?

Pravin AsarCommented:
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.

sidwelleAuthor Commented:
thanks for the help.

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now