1

In trying to get the SVG point from the mouse in my Blazor application, im doing this in razor page

public async Task SvgElementOnMouseMove(MouseEventArgs e)
{
    var point = jsInProcess3.Invoke<string>("getSVG_XY", refSvgElement, e.ClientX, e.ClientY);
}

And in the javascript

window.getSVG_XY = (svg, x, y) => {
   var pt = svg.createSVGPoint();
   pt.x = x;
   pt.y = y;
   pt = pt.matrixTransform(svg.getScreenCTM().inverse());
   return pt.x + " " + pt.y;
}

but using svg-pan-zoom library, im having trouble getting the correct SVG point, I have tried different variations of

  var pan = window.zoomCanvas.getPan();
  var zoom = window.zoomCanvas.getZoom();
  var matrix = window.zoomCanvas.viewport.getCTM();
  svgPoint = svgPoint.matrixTransform(window.CurrentCTM.inverse());
  window.zoomCanvas.onUpdatedCTM: function (ctm) { window.CurrentCTM = ctm; }

but the point is always way out of bounds, how can I get get correct point when user is panning and zooming? My SVG has a viewport set and works fine with pan and zoom just returning incorrect point

I have also tried this, and it's alot closer but still off by some margin (getting CTM of viewport group)

 var mainGroup = svg.getElementById("viewport");
 pt = pt.matrixTransform(mainGroup.getCTM().inverse());
Tim Davis
  • 524
  • 6
  • 17
  • Can you please add more code? It's unclear, what kind of point coordinates you're trying to translate to svg user units (e.g Mouse/pointer position) – herrstrietzel Jan 18 '23 at 20:29
  • Maybe you have the same issue as mentioned [here](https://stackoverflow.com/questions/59579575/how-to-get-x-y-coordinates-from-path-element-inside-svg/59580400#59580400). – JavaScript Jan 20 '23 at 07:42
  • @JavaScript yes I did see that, and the docs say to use getCTM but its actually getScreenCTM.. thanks! – Tim Davis Jan 21 '23 at 08:12

0 Answers0