如何让 SVG textPath 与动画路径一起使用？

Question

请在此处查看演示： https://codepen.io/bsoutendijk/pen/gOvLMaq

预期行为：单击“更新路径”按钮后，路径将发生变化，文本将出现在 animation 末尾的路径上。

实际行为：文本在加载时正确显示在路径上，但单击更新路径时，文本未出现在正确的位置。

代码：

 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>

我如何以可以与动画路径一起使用的方式使用 textPath？

Answer 1

 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>

哦，我可以做到：）

“animateTransform”可以解决您的问题。 “repeatCount” - 重要属性，尝试将其删除，您的 animation 将在“dur”后停止