ReactJS + SVG：点击 FireFox 的动画路径“d”

Question

CodePen here: https://codepen.io/sadpandas/pen/xxbpKvz

const [currentScreen, setCurrentScreen] = React.useState(0);

return (
    <React.Fragment>
    <div>
       <svg
        className="theSvg"
        width="156" height="600" viewBox="0 0 156 600" xmlns="http://www.w3.org/2000/svg">
        <path
            d={pathArray[currentScreen].path}
            stroke={pathArray[currentScreen].strokeColor}
            fill="none"
        >
        </path>
    </svg>
    </div>
    <div>
        <div>
        <button onClick={()=> setCurrentScreen(0)}>0</button>
        <button onClick={()=> setCurrentScreen(1)}>1</button>
        <button onClick={()=> setCurrentScreen(2)}>2</button>
    </div>
    </div>
</React.Fragment>

I am trying to morph SVG paths on button clicks. This works perfectly in Chrome, however the transition is ignored in Firefox.

My current understanding is that Firefox does not support this kind of animation yet. What are my options here? Should I fall back to using the tag?

I have seen some examples that uses the tag, but all of them are just transforms, not triggered on click. I have to use ReactJs to resolve this, so JQuery is out of the option as well. If possible, I'd also like to avoid using a package, as this is the only place in my entire app that would use SVG morphing.

Any tips would be greatly appreciated. Thanks!

Answer 1

Ended up using the animate tag. Works fine with Firefox and Chrome right now.

For anyone who's also learning SVG animations: CodePen: https://codepen.io/sadpandas/pen/GRgyrOJ?editors=1010

const ButtonAndStrings = () => {
    const [currentScreen, setCurrentScreen] = React.useState(0);
    const [oldScreen, setOldScreen] = React.useState(0);


    const handleClick = (index, currentScreen) => {
        setOldScreen(currentScreen)
        setCurrentScreen(index);
    }

    return (
        <>
            <SVGPathAnimation
                path={pathArray[oldScreen]}
                newPath={pathArray[currentScreen]}
            />
            <button onClick={()=> handleClick(0, currentScreen)}>0</button>
            <button onClick={()=> handleClick(1, currentScreen)}>1</button>
            <button onClick={()=> handleClick(2, currentScreen)}>2</button>
        </>
    )
}

The SVG has something call 'animation timeline'. For a new animation to happen, the browser's time needs to be reset. In react's case, adding a ref to the SVG would solve the problem.

reference: This medium article by Jacob Fletcher.