<svg id='svg'>
  <marker id='arrow' viewBox='0 0 10 10' refX='10' refY='5' orient='auto' markerUnits='strokeWidth' markerWidth='10' markerHeight='10'>
    <path class='line-arrow' d='M0,0 L0,10 L10,5 Z'></path>
  </marker>
  
  <g id='group'>
      <line x1="40" y1="20" x2="90" y2="20" marker-end="url(#arrow)"></line>
      <line x1="34.14213562373095" y1="34.14213562373095" x2="105.85786437626905" y2="105.85786437626905" marker-end="url(#arrow)"></line>
    <g>
      <circle cx="20" cy="20" r="20"></circle>
      <text x="13.5" y="25">A</text>
    </g>
    <g>
      <circle cx="120" cy="20" r="30"></circle>
      <text x="107" y="25">B</text>
    </g>
    <g>
      <circle cx="120" cy="120" r="20"></circle>
      <text x="110.25" y="125">C</text>
    </g>
  </g>
  
</svg>

html,
body,
svg {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.01);
}

line {
    stroke: #000;
    stroke-width: 1.1;
}

.line-arrow {
    fill: #000;
}

circle {
  fill: #FCFCFC;
  stroke: gray;
  stroke-width: 2;
}

text {
  fill: #000;
  cursor: default;
  user-select: none;
}

console.clear();
const svg = document.getElementById("svg");
const group = document.getElementById("group");

const translate = { x: 0, y: 0 };

group.onmousedown = e => {
  const beforeMove = { x: e.clientX, y: e.clientY };

  function moveAt(dx, dy) {
    group.style.transform = `translate(${dx}px, ${dy}px)`;
  }

  svg.onmousemove = e => {
    translate.x += e.clientX - beforeMove.x;
    translate.y += e.clientY - beforeMove.y;
    beforeMove.x = e.clientX;
    beforeMove.y = e.clientY;
    moveAt(translate.x, translate.y);
  };
};

document.onmouseup = e => {
  svg.onmousemove = null;
};