UpDating SVG

Posted on 2011-05-01
Last Modified: 2012-05-11
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.

Question by:sidwelle
    LVL 28

    Expert Comment

    by:Pravin Asar
    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

    Author Comment

    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 ...
    LVL 28

    Expert Comment

    by:Pravin Asar
    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; }


    Author Comment

    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
    LVL 28

    Expert Comment

    by:Pravin Asar
    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"


    Author Comment

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

    LVL 28

    Accepted Solution

    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.


    Author Closing Comment

    thanks for the help.

    Featured Post

    Live: Real-Time Solutions, Start Here

    Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

    Join & Write a Comment

    Suggested Solutions

    Whether you've completed a degree in computer sciences or you're a self-taught programmer, writing your first lines of code in the real world is always a challenge. Here are some of the most common pitfalls for new programmers.
    In this post we will learn how to connect and configure Android Device (Smartphone etc.) with Android Studio. After that we will run a simple Hello World Program.
    The goal of the tutorial is to teach the user how to set there setting in Adobe Flash Media Live Encoder and YouTube for optimal video and audio quality.
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    746 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now