Drag and svg viewBox problem

[Klak031]

Is there way to make drag work on svg elemenets if viewBox is not same size as screen. For exaple if viewBox is 0 0 40 20 on drag 1px of mouse move is like 100+ px of svg element move. Can we somehow calculate move by current transform matrix?

You can see example of my issue on https://waterpolo.klaktech.com if you try to drag player

[gianlucajahn]

Yes, you can use the onDrag and onDragEnd event handlers provided by the Framer Motion drag component to calculate the movement of the SVG element based on the current transform matrix. The onDrag event handler receives a DragEvent object as a parameter, which contains a delta property that represents the movement of the element in the x and y direction. You can use this delta property to update the transform matrix of the SVG element, taking into account the current viewBox dimensions and the desired movement.

Here is an example of how you might implement this:

import { motion, useTransform } from "framer-motion";

const Component = () => {
  const svgRef = useRef(null);
  const x = useTransform(svgRef, { x: 0 });

  const handleDrag = (event) => {
    // Calculate the movement in x and y direction based on the current viewBox dimensions and the desired movement
    const movementX = event.delta.x * (40 / window.innerWidth);
    const movementY = event.delta.y * (20 / window.innerHeight);

    // Update the x and y values of the transform matrix
    x.set(x.get() + movementX);
    y.set(y.get() + movementY);
  };

  return (
    <svg viewBox="0 0 40 20" ref={svgRef}>
      <motion.rect
        drag
        dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
        onDrag={handleDrag}
        style={{ x }}
      />
    </svg>
  );
};

In this example, we use the useTransform hook provided by Framer Motion to create a motion value for the x position of the SVG element. We then update this motion value in the onDrag event handler based on the movement of the element and the current viewBox dimensions. This will cause the SVG element to move smoothly in response to the user dragging it on the screen.