[BUG] SVG elements using animate() do not receive CSS animations

[joncwest]

1. Read the FAQs 👇

2. Describe the bug

SVG elements transformed by animate() or useAnimate() do not seem to receive CSS-derived transforms. From what I can tell, transforms are only copied into their renderState's style if the dimensions are defined. However, unlike SVG elements created under the motion package, SVG elements fetched by animate() do not seem to receive dimensions, resulting in transforms never being copied over to the style.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/p/sandbox/framer-motion-enter-animation-forked-8fzrpg

4. Steps to reproduce

Steps to reproduce the behavior:

1. Create an SVG with children elements
2. Use animate() or useAnimate() to animate those elements via some sort of transform (e.g. x, y, translateX, etc.)

5. Expected behavior

The CSS transform should be animated and applied to the element in the same way the same element would behave if generated by the motion package.

6. Video or screenshots

N/A

7. Environment details

Chrome, Firefox

[saschamt]

@joncwest found you on Google :) Did you ever find a solution to this? Arbitrarily adding motion. to the respective SVG elements would work, but surely that can't be the intended way.