Motion: [BUG] SVG components forced to have a transform-origin

[mattgperry]

See the motion.polyline component here: https://codesandbox.io/s/late-cherry-qpfsn

Expected: No transform origin if the user has set their own transform. This is probably a bug in Stylefire.

[mattgperry]

Fixed in 1.6.4

[jameswesc]

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.

[jameswesc]

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?

[dillonbhola]

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.

[klvnptr]

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

[Victoire44]

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

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

[joshuawootonn]

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!!

[joshuawootonn]

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