Drag event in scaled svg or how to keep up with the mouse?

Question

JavaScript

I have an svg with an image in the background. SVG scales based on browser size using the viewBox attribute on the svg element. Also, in addition to the picture, there are several elements in the svg on which the drag event hangs. If the scale is less than the original size of the svg (specified in the viewBox), then when you try to drag the element with the mouse, it does not keep up with the mouse, as it moves relative to the sizes specified in the viewBox, and not html.
Can you advise something?

Answer 1

Convert mouse coordinates to SVG coordinates:

function getCursorPosition(event, svgElement) {
  var svgPoint = svgElement.createSVGPoint();

  svgPoint.x = event.clientX;
  svgPoint.y = event.clientY;

  return svgPoint.matrixTransform(svgElement.getScreenCTM().inverse());
}

// пример использования
var svg = document.querySelector('svg');

svg.addEventListener('mousemove', function(e) {
  var cursor = getCursorPosition(e, svg);
  
  console.log(cursor);
}, false);