[BUG] SVG viewBox animate not working when wrapping a component with motion()

[jagreehal]

Description

I'm trying to animate the viewBox for an SVG component wrapped using motion(), but it doesn't seem to work e.g

import { motion } from "framer-motion";
import { forwardRef } from "react";


const SvgComponent = forwardRef((props, ref) => (
    <svg {...props} ref={ref} viewBox="0 0 100 100" width="400" height="400">
        ....
    </svg>
));

export default function App() {
    const MotionSvgComponent = motion(SvgComponent);

    return (
        <div>
            <MotionSvgComponent
                animate={{
                    viewBox: [
                        "0 0 100 100",
                        "0 0 50 50",
                        "50 0 50 50",
                        "0 50 50 50",
                        "50 50 50 50",
                        "0 0 100 100"
                    ]
                }}
                transition={{
                    duration: 10
                }}
            />

        </div>
    );
}

Other animation properties work fine e.g

<MotionSvgComponent
  animate={{
    x: 50,
  }}
/>

Sandbox

https://codesandbox.io/s/agitated-wilbur-wmzhf

Steps to reproduce the behavior

The sandbox shows both a wrapped component and an example that shows the viewBox is animated when using motion.svg.

What should happen

Both components should animate the same way.

[EliavYair1]

I have the same issue with my website logo it animate the inside path of the logo but ignores the outside path of the svg. Following. P.a: if I’ll solve the issue I’ll let you know.

[mattgperry]

I'll need to make a decision on custom SVG components rather than fix this more directly. Either something like the closed PR, motion.createSVG, or perhaps a wontfix.