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.
Puede usar onClick="animation.beginElement()"
Como observación: tiene un atributo fill="black" para la animación. Supongo que querías que fuera fill="freeze". Esto congelaría la animación de forma similar a 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>