[BUG] Dragging within an SVG with fixed viewBox dimensions

[andreaskienle]

When the width and height dimensions of an svg are different from the viewBox dimensions, dragging items doesn’t work correctly: The mouse pointer location does not correspond to the dragged item’s location.

<svg viewBox="0 0 100 100" width="500" height="500">
  <motion.rect width="10" height="10" drag />
</svg>

Expected behaviour
When the viewBox corresponds to the width and height, there is no such issue.

<svg viewBox="0 0 500 500" width="500" height="500">
  <motion.rect width="50" height="50" drag />
</svg>

Is there any way of getting a correct drag behaviour in an svg with a fixed viewBox? It would be very inconvenient to change the viewBox (and recalculating the entire content) every time the SVG’s dimensions change (e.g. after resizing the window).

Sandbox
https://codesandbox.io/s/musing-bush-dc4vh?file=/src/App.js:475-596

[EliavYair1]

can you assign it to me ?
i had the same issue and solved it very easly

[EliavYair1]

https://github.com/EliavYair1/Fm_bug_fixed_.git
the solution is in my repo
please allow me to pull request.

[mattgperry]

Please see https://motion.dev/docs/react-svg-animation#drag-gesture