Vea la demostración aquí: https://codepen.io/bsoutendijk/pen/gOvLMaq
Comportamiento esperado: después de hacer clic en el botón "actualizar ruta", la ruta cambiará y el texto aparecerá a lo largo de la ruta al final de la animación.
Comportamiento real: el texto aparece correctamente en la ruta al cargar, pero al hacer clic en actualizar ruta, el texto no aparece en el lugar correcto.
código:
const path = document.getElementById('myPath'); const button = document.getElementById('myButton'); button.addEventListener('click', () => { console.log('clicked!'); path.setAttribute('d', getRandomCurve()); }) function getRandomCurve() { const curveSize = Math.round(Math.random() * 300); return `M 100 350 q ${curveSize} -300 300 0` } #myPath { transition: all ease-out 2s; } <div> <button id="myButton">Update Path</button> <svg height="400" width="450"> <path id="myPath" d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" /> <text style="font-size: 2em;"> <textPath startOffset="30%" text-anchor="middle" href="#myPath"> Hello World </textPath> </text> </svg> </div>¿Cómo uso textPath de manera que pueda funcionar con rutas animadas?
const path = document.getElementById("myPath2"); function getRandomCurve() { const curveSize = Math.round(Math.random() * 300); return `M 100 350 q ${curveSize} -300 300 0`; } setInterval(() => { const pathDef = getRandomCurve(); path.setAttribute("d", pathDef); }, 1000) .anim { transition: 1s; } <div> <svg height="400" width="450"> <path id="myPath2" class="anim" d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" /> <text x="0" y="0" style="font-size: 2em;"> <textPath startOffset="30%" href="#myPath2" class="anim"> Hello World <animateTransform attributeName="transform" dur="2s" repeatCount="indefinite"/> </textPath> </text> </svg> </div>Oh, puedo hacerlo :)
"animateTransform" puede solucionar su problema. "repeatCount" - atributo importante, intente eliminarlo y su animación se detendrá después de "dur"