无法为多个 SVG 文本路径设置动画？

Question

我试图让主页上的多个标题在 svg textPath 上进行动画处理，每个标题显示 3 个断点，一个用于桌面，一个用于平板电脑，一个用于移动设备。我的代码加载标题，它们每个都位于自己的 svg 弯曲路径上。

然而，只有一个标题在滚动时有动画效果，当我更改断点时，其他标题只是冻结，我什至尝试将它们全部加载到同一页面上，没有媒体查询，并且只有一个标题仍然有动画，其余的仍然是静止的。

如何使每个标题在滚动时具有动画效果？

我尝试更改此处建议的变量，但不起作用。 SVG textPath 动画在页面上滚动多次

但不确定为什么它不起作用。

它们都是相同的代码，只是变量发生了变化，为每个变量添加了一个数字。

谢谢

这是针对桌面设备的第一个标题。

  <path id="text-curve" d="M0 100s269.931 86.612 520 0c250.069-86.612 480 0 480 0" fill="none"/>
  
  <text y="40" font-size="3em">
    <textPath id="text-path" href="#text-curve" startOffset="200">
This is a heading</textPath>
  </text>
</svg>

<script>
console.clear();

var textPath = document.querySelector('#text-path');
var textContainer = document.querySelector('#text-container');

var path = document.querySelector( textPath.getAttribute('href') );

var pathLength = path.getTotalLength();
console.log(pathLength);

function updateTextPathOffset(offset){
  textPath.setAttribute('startOffset', offset); 
}

updateTextPathOffset(pathLength);

function onScroll(){
  requestAnimationFrame(function(){
    var rect = textContainer.getBoundingClientRect();
    var scrollPercent = rect.y / window.innerHeight;
    console.log(scrollPercent);
    updateTextPathOffset( scrollPercent * 2 * pathLength );
  });
}

window.addEventListener('scroll',onScroll);

</script>

这是针对平板电脑的第二个标题。

<svg id="text-container2" viewBox="0 -300 1000 500" xmlns="http://www.w3.org/2000/svg">
  <path id="text-curve2" d="M0 100s269.931 86.612 520 0c250.069-86.612 480 0 480 0" fill="none"/>
  
  <text y="40" font-size="3em">
    <textPath id="text-path2" href="#text-curve2" startOffset="200">
This is a sub-heading</textPath>
  </text>
</svg>


<script>
console.clear();

var textPath2 = document.querySelector('#text-path2');
var textContainer2 = document.querySelector('#text-container2');

var path = document.querySelector( textPath.getAttribute('href') );

var pathLength = path.getTotalLength();
console.log(pathLength);

function updateTextPathOffset(offset){
  textPath.setAttribute('startOffset', offset); 
}

updateTextPathOffset(pathLength);

function onScroll(){
  requestAnimationFrame(function(){
    var rect = textContainer.getBoundingClientRect();
    var scrollPercent = rect.y / window.innerHeight;
    console.log(scrollPercent);
    updateTextPathOffset( scrollPercent * 2 * pathLength );
  });
}

window.addEventListener('scroll',onScroll);

</script>

这是针对移动设备的第三个标题。

<svg id="text-container3" viewBox="0 -1000 1000 1200" xmlns="http://www.w3.org/2000/svg">
  <path id="text-curve3" d="M0 100s269.931 86.612 520 0c250.069-86.612 480 0 480 0" fill="none"/>
  
  <text y="40" font-size="3em">
    <textPath id="text-path3" href="#text-curve2" startOffset="200">
This is a 3rd heading</textPath>
  </text>
</svg>


<script>
console.clear();

var textPath3 = document.querySelector('#text-path3');
var textContainer3 = document.querySelector('#text-container3');

var path = document.querySelector( textPath.getAttribute('href') );

var pathLength = path.getTotalLength();
console.log(pathLength);

function updateTextPathOffset(offset){
  textPath.setAttribute('startOffset', offset); 
}

updateTextPathOffset(pathLength);

function onScroll(){
  requestAnimationFrame(function(){
    var rect = textContainer.getBoundingClientRect();
    var scrollPercent = rect.y / window.innerHeight;
    console.log(scrollPercent);
    updateTextPathOffset( scrollPercent * 2 * pathLength );
  });
}

window.addEventListener('scroll',onScroll);

</script>