SOURCE

function handleMouseMove1(evt) {
  const width = document.getElementById('container').scrollWidth;
  let x = event.offsetX / width * 1020 - 10;

  if (x > 1000) {
    x = 1000;
  } else if (x < 0) {
    x = 0;
  }

  document.getElementById('line').setAttribute('x1', x);
  document.getElementById('line').setAttribute('x2', x);
}

function handleClick(evt) {
  const x = transformPoint(evt);
  
  hiddenMouseMovePointer();

  document.getElementById('line').setAttribute('x1', x);
  document.getElementById('line').setAttribute('x2', x);
}

function handleMouseMove2(evt) {
  const x = transformPoint(evt);
  
  const p = document.getElementById('mouseMovePointer');
  p.setAttribute('transform',`translate(${x},0)`);
  p.style.visibility = 'visible';
}

function hiddenMouseMovePointer() {
  const p = document.getElementById('mouseMovePointer');
  p.style.visibility = 'hidden';
}

function transformPoint(evt) {
  const svg = document.getElementById('container');
  const width = svg.scrollWidth;

  const rect = document.getElementById('rect');
  const ctm = rect.getScreenCTM();

  const pt = svg.createSVGPoint();

  pt.x = evt.clientX;
  pt.y = evt.clientY;

  const mf = pt.matrixTransform(ctm.inverse());

  let x = mf.x;

  if (x > 1000) {
    x = 1000;
  } else if (x < 0) {
    x = 0;
  }
  
  return x;
}

<svg version="1.1" baseProfile="full" width="100%" height="200" viewBox="0 0 1020 200"
xmlns="http://www.w3.org/2000/svg" style="border: 1px solid red" id="container"
onmousemove="handleMouseMove2(event)" onclick="handleClick(event)" onmouseout="hiddenMouseMovePointer()">
  <g transform="translate(10,0)">
    
    <rect id="rect" x="0" width="1000" height="180" fill="#33546F" />
    <line x1="100" x2="100" y1="0" y2="90%" stroke="black" id="line" />
    
    <g id="mouseMovePointer" style="visibility:hidden;">
      <path fill="red" d="M0 0 L5 -8 L-5 -8 z" />
      <path fill="red" d="M0 180 L5 188 L-5 188 z" />
    </g>
  </g>
</svg>