[BUG] SVG components forced to have a transform-origin about motion HOT 10 CLOSED

@mattgperry Can confirm, this is still a bug. I want to rotate an SVG on hover to 0deg from initial position -6deg so I wrote it like this:

<motion.svg
  initial={{
    rotate: -6,
  }}
  whileHover={{
    rotate: 0,
  }}
>
  {/*...*/}
</motion.svg>

But it automatically adds transform-origin: 87.936px 88.936px; to the browser when I didn't even specify anything.

I think it should be just 0px 0px if nothing is provided.

from motion.

Setting

I had the same issue. Setting this, worked for me:

style={{originX: 0.5, originY: 0.5}}

This didn't work for me but it led me to

 style={{ originX: '50%', originY: '50%' }}

which did!!

from motion.

I'm having the same issue. Please fix this bug.

from motion.

I had the same issue. Setting this, worked for me:

style={{originX: 0.5, originY: 0.5}}

from motion.

Ah I just realised setting originX to "0px", not 0, is what I want.

As it mentions in the documentation:

If set as numbers, originX and Y default to a progress value between 0 and 1.

A progress value of what though? The bounds of the object?

from motion.

This bug is in build 1.10.3.

I tried rotating a circle svg element to simulate the movement of the sun. Setting the transformOrigin of the circle gets overridden. Here is a codesandbox showing an example.

Here is what the css shows when I inspect the element in chrome.

Here's what I tried:

• adding "transform-origin": "center" to the hidden and visible properties of the variant object (transformOrigin throws and error).
• wrapping the circle element in a motion.g element and adding the transform origin style there.

from motion.

Setting

I had the same issue. Setting this, worked for me:

style={{originX: 0.5, originY: 0.5}}

This didn't work for me but it led me to

 style={{ originX: '50%', originY: '50%' }}

which did!!

Nevermind... 50% here sets the origin relative to the svg tag, while using a number evidently sets the origin relative to the path itself. It working earlier was just a fluke

from motion.

Fixed in 1.6.4

from motion.

Hi, I'm still having this issue when transforming motion.g elements. Even if I set my own transform origin it seems to set its own based on the bounding box of its children.

See here: https://codesandbox.io/s/determined-monad-rcidp

Expected: transform-origin to be set to originX originY

It doesn't show in the codesandbox, but I've noticed it also tries to set the transform-origin as transformOrigin which react doesn't recogniee.

from motion.

The bug persists exclusively on Firefox. It consistently sets the value transform-origin: 0px 0px 0px, and only applying style={{ originX: '50%', originY: '50%' }} or transform-origin: 50% 50% !important helps to achieve the desired result. Notably, the functionality works correctly on Chrome.

<motion.circle
    cx="50"
    cy="45"
    r="10"
    fill="black"
    animate={{
        y: active ? 5 : 0,
        scale: active ? 3 : 1,
    }}
/>

from motion.