Quiero animar una ruta svg de modo que la animación solo se ejecute una vez, sin embargo, si los valores d cambian, la animación debería ejecutarse nuevamente una vez. Tengo problemas para que la animación se ejecute cada vez que cambian los valores de la ruta, si configuro el valor de repeatCount en 1, no se ejecutará nuevamente después de que cambien los valores de svg y el svg se "represente". Incluí un código a continuación que replica lo que estoy tratando de hacer, se agradece cualquier ayuda. Aquí hay una demostración de código con solo la animación, sin reaccionar: 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> ) }

También intenté usar la transición en la ruta, que funciona perfectamente en Chrome pero no funciona en Safari.