Make animate execute again after svg path changes

Question

I want to animate an svg path such that the animation only runs once, however if the d values change then animation should run again once. I'm having trouble having the animation run every time the path values change, if I set the repeatCount value to 1 it won't run again after the svg values change and the svg "rerenders". I included some code below that replicates what I'm trying to do, any help is appreciated. Here is a code demo with just the animation, no react: https://codepen.io/shak8/pen/RwLLjNm

const SVGAnimate = () =>{
    const [width, setWidth] = useState(213)
    const [prevWidth, setPrevWidth] = useState(213)
    return (
      <div>
         <svg width="400" height="500">
           <path  style="stroke-width:3;stroke:rgb(0,0,0)"
            fill="black"
            d=`M 0 212 S 226 212, ${width} 20 V 212 H 0`>
    
              <animate 
                attributeName="d"
                dur="5s"
                from=`M 0 212 S 226 212,${prevWidth} 20 V 212 H 0`
                to=`M 0 212 S 226 212, ${width} 20 V 212 H 0`

                repeatCount="1"
                fill="black"
                />
            </path>
            <button onClick={() => {
                                      // These should trigger svg path to change, desired
                                      // effect is for path to change with animation.
                                      setPrevWidth(width == width)
                                      setWidth(width == 213 ? 320 : 213)
                                   }
            }> Change</button>
      </div>
    )
}

I've also tried using transition on the path, which works perfectly on chrome but doesn't work on safari.

Answer 1

You can use onClick="animation.beginElement()"

As an observation: you have a fill="black" attribute for the animation. I suppose you meant it to be fill="freeze". This would freeze the animation similar to animation-fill-mode: forwards.

<div>
         <svg width="400" height="200">
           <path  style="stroke-width:3;stroke:rgb(0,0,0)"
            fill="black"
            d="M 0 212 S 226 212, 100 20 V 212 H 0">
    
              <animate id="animation"
                attributeName="d"
                dur="5s"
                from="M 0 212 S 226 212,100 20 V 212 H 0"
                to="M 0 212 S 226 212, 300 20 V 212 H 0"

                repeatCount="1"
                fill="freeze"
                />
            </path>
   </svg>
            <button onClick="animation.beginElement()"> Change</button>
      </div>