在两个svg矩形之间绘制动态线

let svgRect;

function xStart(XS) {
  svgRect.setAttribute('x', XS)
  
  if(svgRect === rfirst) {
    line.setAttribute("x1", parseFloat(XS) + orders[0]);
  } else {
    line.setAttribute("x2", XS);
  }
}

function rWidth(RW) {
  svgRect.setAttribute('width', +RW)
  
  if(svgRect === rfirst) {
    line.setAttribute("x1", RW);
  }
}


let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("class", "octicon octicon-star");
//  svg.setAttribute("viewBox", "0 0 14 16");
svg.setAttribute("version", "1.1");
svg.setAttribute("width", 240);
svg.setAttribute("height", 160);
svg.setAttribute("aria-hidden", "true");
let barThickness = 20
let rfirst;

let orders = [100, 152];
//orders.forEach((element, index, array) => console.log('a[' + index + '] = ' + element) )

let line = document.createElementNS("http://www.w3.org/2000/svg", "line");
line.setAttribute("x1", orders[0]);
line.setAttribute("x2", 0);
line.setAttribute("y1", barThickness*0.5);
line.setAttribute("y2", (barThickness*1.5 + 10));
line.setAttribute("stroke-width", "5");
line.setAttribute("stroke", "green");


orders.forEach(function(element, index, array) {
  console.log('a[' + index + '] = ' + element)
  let r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  r.setAttribute("x", 0);
  r.setAttribute("y", (barThickness + 10) * index + 0);
  r.setAttribute("width", element);
  r.setAttribute("height", barThickness);
  r.setAttribute("fill", "black");
  
  if(index === 0) {
    rfirst = r;
  };

  let isDrawing = false;
  let x = element
  let mousePosition = 0

  r.addEventListener('mouseenter', e => {
    r.setAttribute("fill", "red")
  });

  r.addEventListener('mouseleave', e => {
    r.setAttribute("fill", "black")
    if (isDrawing === true) {
      isDrawing = false;
    }
  });


  r.addEventListener('mousedown', e => {
    svgRect = r
    isDrawing = true;
    // console.log(e.path[0])
    document.querySelector('#from').value = r.getAttribute('x') //e.path[0].getAttribute("x")
    document.querySelector('#to').value = r.getAttribute('width') // e.path[0].getAttribute("width")
  });

  r.addEventListener('mousemove', e => {
    if (isDrawing === true) {
      document.querySelector('#from').value = r.getAttribute('x') //e.path[0].getAttribute("x")
      document.querySelector('#to').value = r.getAttribute('width') // e.path[0].getAttribute("width")

      if (e.offsetX > mousePosition) {
        x++
      } else if (e.offsetX < mousePosition) {
        x--
      }
      mousePosition = e.offsetX
      r.setAttribute("width", x)
      
      if(r === rfirst) {
        line.setAttribute("x1", r.getAttribute('width'));
      }
    }
  });

  r.addEventListener('mouseup', e => {
    if (isDrawing === true) {
      document.querySelector('#from').value = r.getAttribute('x') //e.path[0].getAttribute("x")
      document.querySelector('#to').value = r.getAttribute('width') // e.path[0].getAttribute("width")      
      isDrawing = false;
    }
  });

  svg.appendChild(r);

})

svg.appendChild(line);
document.body.appendChild(svg)

<div>
  <label for="from">From:</label>
  <input onchange="xStart(this.value)" type="number" id='from' name="from">
  <label for="to">To:</label>
  <input onchange="rWidth(this.value)" type="number" id='to' name="to">
  <br><br>
</div>