Please view the demo here: https://codepen.io/bsoutendijk/pen/gOvLMaq
Expected behavior: After clicking "update path" button, the path will change, and the text will appear along the path by the end of the animation.
Actual behavior: The text appears correctly on the path upon load, but when clicking update path, the text does not appear in the correct place.
code:
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>How do I use textPath in a way that it can work with animated paths?
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, i can do it :)
"animateTransform" can fix your problem. "repeatCount" - important attribute, try to remove it and your animation will stop after "dur"