Moving Anchor Point for Framer Motion

I want to create an animation for an .svg component using the React Framer Motion library so that it rotates 360 degrees. However, I don’t want the anchor point to be in the center of the .svg, I want it to be a custom point “x% y%” off the top left corner. I have tried something like the following (inside the .svg file), however it doesn’t work (it still just rotates about the center). What are other methods to try, or what might be missing from the current implementation?

  <motion.path
    id="Needle"
    d=...
    fill=...
    initial={{ opacity: 1, rotate: 0, transformOrigin: "9% 75%" }} // Initial animation state
    animate={{ opacity: 1, rotate: 360 }} // Target animation state
    transition={{ rotate: { duration: 2, delay: 0 } }} // Animation duration and delay
  />