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

Question

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

行为：单击“更新路径”按钮后，路径将更改，并且文本将在动画结束时沿着路径出现。

实际行为：文本在加载时正确出现在路径上，但是在单击“更新路径”时，文本不会出现在正确的位置。

代码：

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”可以解决您的问题。
“重复” - 重要属性，尝试将其删除，您的动画将在“ dur”之后停止