How to connect dots in differents positions with svg?

Question

I'm new at using svg as you can see and i have a problem connecting dots.

What I want to do is to connect this 2 dots with a line no matter their position.

As you can see in the image bellow when i change the cx="50" to cx="510" the line still in the same postion but i want the line to "follow" the second circle no matter the position.

Resuming:

In my case I have a static line what I want its to have a dinamic line that connects with the other dot when I change my coordinates(cx or cy).

    <!DOCTYPE html>
    <html>
    <head>
     <title></title>
    
    
    </head>
    <body>
    
    
    <svg width="1000" height="1000">
    
        <circle id="circle0" cx="50" cy="50" r="20" stroke="black" stroke-width="3" fill="grey" onClick="dotClick(0)"></circle>
        <circle id="circle1" cx="50" cy="110" r="20" stroke="black" stroke-width="3" fill="grey" onClick="dotClick(1)"></circle>
     
    
        <line id="line0" x1="50" y1="50" x2="50" y2="100" />
    
    </svg>
    
    
    
    <script>
     
     var buttons = {};
    
    function dotClick(width) {
    
        (width === 0) ? buttons.one = !buttons.one : buttons.two = !buttons.two;
        
    
        document.getElementById("line0").setAttribute("stroke", (buttons.one && buttons.two) ? "red" : "");
        document.getElementById("circle0").setAttribute("fill", (buttons.one ? "red" : "grey"));
        
        document.getElementById("circle1").setAttribute("fill", (buttons.two ? "red" : "grey"));
    
    
    }
    </script>
    
    </body>
    </html>

You could adapt/use the `drawPath` function from this gist: https://gist.github.com/alojzije/11127839 — Majid Fouladpour, May 05 '17 at 00:49

Naga Sai A · Accepted Answer · 2017-05-05T00:46:47.133

2

To achieve expected change line x2 as well

<line id="line0" x1="50" y1="50" x2="510" y2="100" />

Codepen- https://codepen.io/nagasai/pen/NjabQJ

Updated codepen for dynamic line

https://codepen.io/nagasai/pen/OmxWLa?editors=1111

edited May 05 '17 at 00:46

answered May 05 '17 at 00:34

Naga Sai A

10,771
1
21
40

But in your example you have a "static" line. What I Want to happen is a dinamic line, everytime i change my coordinates(cx and cy) the line follow the other circle. I don't know if I explain this well but that's what i'm trying to do. – jarwin May 05 '17 at 00:41
If you read the second line of the question, he clearly states "What I want to do is to connect this 2 dots with a line **no matter their position**." – aug May 05 '17 at 00:44

score 1 · Answer 2 · edited May 23 '17 at 12:10

I can try to add a code example for you to illustrate what I mean but perhaps a textual explanation will suffice for now.

If you want the line to connect the two dots no matter where they may be, consider trying to pass the attributes in the circle elements to the line element. The first circle's cx and cy would correspond to the line's x1 and y1 and the second circle would be the x2 and y2. (You can just as easily use getAttribute to grab this information off the circle elements)

How you get this information whether it be through an event.target you pass through the click handler or it be through how you're doing it now (simply grabbing the element by its id and shoving it in) doesn't truly matter. The point is no matter where these circles are, you want the circles to be supplying the information for the line coordinates and not hardcoded.

I hope this helps as a starting point. If you are still struggling, feel free to comment. You are really close but I'd really like to see you finish through :)

How to connect dots in differents positions with svg?

2 Answers2