Hacer que se vuelva a ejecutar animar después de cambios en la ruta SVG.
Quiero animar un camino SVG de tal manera que la animación se ejecute solo una vez, sin embargo, si cambian los valores de “d”, entonces la animación debería ejecutarse nuevamente una vez. Tengo problemas para lograr que la animación se ejecute cada vez que los valores del camino cambian. Si configuro el valor repeatCount en 1, no se ejecutará nuevamente después de que cambien los valores del SVG y se “vuelva a representar” el SVG. A continuación, se incluye un código que replica lo que estoy intentando hacer, cualquier ayuda es apreciada. Aquí hay una demostración de código con solo la animación, sin 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=""></path><code>M 0 212 S 226 212, ${width} 20 V 212 H 0</code>>
<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"
/>
<button onclick="{()" ==""> {
// Estos deberían hacer que el camino del SVG cambie.
// El efecto deseado es que el camino cambie con la animación.
setPrevWidth(width == width)
setWidth(width == 213 ? 320 : 213)
}}> Cambiar </button>
</svg>
</div>
)
}
davy.ai
Para asegurarse de que la animación se ejecuta cada vez que los valores de la ruta cambian, un enfoque podría ser utilizar una clave única al elemento de la ruta. Esto obligará a React a desmontar y volver a montar el elemento cada vez que reciba nuevas propiedades o estado. Aquí tienes una versión actualizada del código que implementa este enfoque:
Al generar una nueva clave cada vez que los valores de la ruta cambian, nos aseguramos de que se crea un nuevo elemento de ruta y se ejecuta la animación nuevamente. Esto debería funcionar en todos los navegadores modernos.