Linie podłączone do kółka w SVG nie działają. Jak podczas przesuwania kółkiem przesuwać również linie?

Dobry wieczór!

Chciałbym uzyskać efekt, żeby podczas przenoszenia kółka z podłączonymi liniami, wszystkie linie podążały za tym kółkiem. Niestety jak na razie udało mi się zrobić to dla jednej linii. Próbowałem już różnych metod, szukałem w Internecie i nic nie znalazłem.

Próbowałem to zrobić na pętli, ustawiając cx i cy dla każdej linii, która jest podłączona do kółka po id (path0, path1 itd.) lecz mi to nie działało. Proszę o pomoc.

PS. kółka łączy się liniami klikając na nie z przytrzymanym "ctrl"

Mam taki kod:

var moved_element_offsetLeft = 0,
    moved_element_offsetTop = 0, 
    mousedown = false,
    moved_element,
    cx = 50,
    mcx, 
    cy = 50,
    mcy, 
    x = 50,
    mx, 
    y = 50,
    my,
    zmienna = 1,
    actualX,
    actualClick,
    ActualTagL,
    ActualTagR,
    LRectX,
    LRectY,
    RRectX,
    RRectY,
    FirstClickLocationX = 0,
    FirstClickLocationY = 0,
    SecondClickLocationX = 0,
    SecondClickLocationY = 0,
    click_element,
    liczbaP = 0,
    correctClick,
    Mcircle,
    Mpath,
    zmiennik = 0,
    Arrow2X = 0,
    Arrow2Y = 0,
    Arrow3X = 0,
    Arrow3Y = 0,
    Apath,
    scx;
 
var svg = document.getElementById('container'); 
 
 
function AddCircle(){ 
    var group = document.createElementNS("http://www.w3.org/2000/svg", 'g');
    var circle = document.createElementNS("http://www.w3.org/2000/svg", 'circle');
 
    Mcircle = circle;
 
    group.id = "CircleGroup"+zmienna;
    svg.appendChild(group);
     
    circle.setAttribute("cx","50");
    circle.setAttribute("cy","50");
    circle.setAttribute("r","40");
    circle.setAttribute("fill","yellow");
    circle.setAttribute("position", "absolute");
    circle.setAttribute("display", "block");
    circle.id = "Circle"+ zmienna;
    circle.classList = zmienna + 1;
 
    group.appendChild(circle);
 
    group.addEventListener('mousedown', mouseClick, true);
    zmienna++;
}
 
function RemPath(){
  svg.removeChild(Mpath);
}
 
 
function AddRect(){
  var rect = document.createElementNS("http://www.w3.org/2000/svg", 'rect');
  rect.setAttribute("x","50");
  rect.setAttribute("y","50");
  rect.setAttribute("width","100");
  rect.setAttribute("height","100");
  rect.setAttribute("fill","blue");
  rect.setAttribute("position", "absolute");
  rect.setAttribute("display", "block");
  svg.appendChild(rect);
  rect.addEventListener('click', mouseClick, true)
}
 
function AddPath(){
    var LSecondClickLocationX = Number(SecondClickLocationX);
    var LSecondClickLocationY = Number(SecondClickLocationY);
    var LFirstClickLocationX = Number(FirstClickLocationX);
    var LFirstClickLocationY = Number(FirstClickLocationY);
 
    var path = document.createElementNS("http://www.w3.org/2000/svg", 'line');
    Mpath = path;
    var poly = document.createElementNS("http://www.w3.org/2000/svg", 'polygon');
    path.setAttribute("x1", LFirstClickLocationX);
    path.setAttribute("y1", LFirstClickLocationY);
    path.setAttribute("x2", LSecondClickLocationX);
    path.setAttribute("y2", LSecondClickLocationY);
    path.setAttribute("stroke", "red");
    path.setAttribute("stroke-width", "3");
    path.setAttribute("fill", "none");
    path.setAttribute("position", "absolute");
    path.setAttribute("display", "block");
    path.classList.add("path");
    path.id = "path" + liczbaP;
    liczbaP++;
    svg.appendChild(path); 
 
 
    /*Arrow2X = LSecondClickLocationX - 10;
    Arrow2Y = LSecondClickLocationY + 10;
    Arrow3X = LSecondClickLocationX - 10;
    Arrow3Y = LSecondClickLocationY - 10;
 
    poly.setAttribute("points", LSecondClickLocationX+","+LSecondClickLocationY+" "+Arrow2X+","+Arrow2Y+" "+Arrow3X+","+Arrow3Y);
    poly.setAttribute("fill", "red");
    poly.setAttribute("stroke", "red");
    poly.setAttribute("display", "block");
    poly.setAttribute("position", "absolute");
    poly.setAttribute("z-index", "10");
 
    svg.appendChild(poly);*/
}
 
function mouseClick(e) { 
  moved_element = e.target; 
  actualClick = moved_element.id;     
  const moved_element_rect = e.target.getBoundingClientRect();
  const margines_o = document.getElementById('container').getBoundingClientRect();
  moved_element_offsetLeft = e.clientX - moved_element_rect.left; 
  moved_element_offsetTop = e.clientY - moved_element_rect.top;
 
  if(e.ctrlKey){
    zmiennik = 1;
  }
  else{
    zmiennik = 0;
  }
 
  Mcircle.onmousedown = function MouseDownClick(){ 
    mousedown = true;
    moved_element.classList.add('mouse-down');
    moved_element.setAttribute('stroke', 'black');
    moved_element.setAttribute('stroke-width', '4');
 
  }
  
  Mcircle.onmouseup = function MouseUpClick(){
    mousedown = false;
    moved_element.classList.remove('mouse-down');
    moved_element.removeAttribute('stroke');
    moved_element.removeAttribute('stroke-width');
 
    if(zmiennik == 1){
 
      if((FirstClickLocationX == 0 && FirstClickLocationY == 0) || (FirstClickLocationX != 0 && FirstClickLocationY != 0 && SecondClickLocationX != 0 && SecondClickLocationY != 0)){
        FirstClickLocationX = moved_element.getAttribute("cx");
        FirstClickLocationY = moved_element.getAttribute("cy");
         
        SecondClickLocationX = 0;
        SecondClickLocationY = 0;
      }
      else if(FirstClickLocationX != 0 && FirstClickLocationY != 0 && SecondClickLocationX == 0 && SecondClickLocationY == 0){
        SecondClickLocationX = moved_element.getAttribute("cx");
        SecondClickLocationY = moved_element.getAttribute("cy");
 
        AddPath();
      }
    }
    moved_element = undefined;
   
  }
}
   
window.addEventListener('mousemove', (e) => {
  if (mousedown) { 
    if(moved_element=="[object SVGCircleElement]"){
      moved_element.setAttribute("cx", e.clientX - moved_element_offsetLeft + 40); 
      moved_element.setAttribute("cy", e.clientY - moved_element_offsetTop + 40);
  
      cx = e.clientX - moved_element_offsetLeft + 40;
      cy = e.clientY - moved_element_offsetTop + 40; 
     
      if(Mpath != undefined){
        if(document.querySelector('line[x1="'+cx+'"]') && document.querySelector('line[y1="'+cy+'"]')){
          Apath = document.querySelector('line[x1="'+cx+'"]').id;
        }else if(document.querySelector('line[x2="'+cx+'"]') && document.querySelector('line[y2="'+cy+'"]')){
          Apath = document.querySelector('line[x2="'+cx+'"]').id;
        }
      }
       
       
      if(Mpath != undefined){
        if(Mpath.getAttribute('x1') <= cx+20 && Mpath.getAttribute('x1') >= cx-20){
          Mpath.setAttribute('x1', cx);
          Mpath.setAttribute('y1', cy);
        }else if(Mpath.getAttribute('x2') <= cx+20 && Mpath.getAttribute('x2') >= cx-20){
          Mpath.setAttribute('x2', cx);
          Mpath.setAttribute('y2', cy);
        }
      }
    }
    else{
      moved_element.setAttribute("x", e.clientX - moved_element_offsetLeft); 
      moved_element.setAttribute("y", e.clientY - moved_element_offsetTop); 
 
      x = e.clientX - moved_element_offsetLeft +50;
      y = e.clientY - moved_element_offsetTop +50;
     
    }  
  } 
}, true);

<!DOCTYPE html>
<html>
    <head>
        <title>SVG</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <style>
              #container{
                    min-width: 1000px;
                    min-height: 700px;
                    background-color: rgb(87, 40, 40);
              }
 
             circle{
                    position: absolute;
                    display: block;
             }
       </style>
    </head>
    <body>
        <svg id="container">
             
 
        </svg>
 
        <button class="onclick" onclick="AddCircle()">Wstaw koło</button>
        <button class="onclick" onclick="AddPath()">Wstaw linię</button>
        <button class="onclick" onclick="RemPath()">Usuń linię</button>
        <script type="text/javascript" src="main.js"></script>
    </body>
</html>