Javascript 如何设置文本动画，使其在使用SVG'；什么是文本路径？

我尝试使用SVG的文本路径来实现的是，当文本跟随其动画路径时，文本不会旋转；因此，它在设置动画时保持水平，如下所示：

默认设置动画时，文本旋转到其当前路径角度，使文本看起来如下：

如何在保持文本水平的同时使用SVG的textpath来实现文本动画化

编辑：根据要求，这里是我用于水平文本的代码；我无法实际实现动画：

<svg>
<path id="MyPath" d="M 100 200
          C 200 100 300   0 400 100
          C 500 200 600 300 700 200
          C 800 100 900 100 900 100"/>

<use id="curve" xlink:href="#MyPath" fill="none" stroke="red"  />

<text id="origText" fill="white">
    <textpath xlink:href="#MyPath" >
  OH NOES!, DANCING TEXT ARRIVED!

        <animate attributeName="startOffset" from="100%" to ="-100%" 
             begin="0s" dur="10s" repeatCount="indefinite" keyTimes="0;1" 
             calcMode="spline" keySplines="0 0 1 1"/>
    </textpath>
</text>
</svg>

var t = document.getElementById('origText');
var t_text = t.textContent; // "We go up...."
var curve = document.getElementById("MyPath");
var len = curve.getTotalLength(); // curve length

var steps = len/t_text.length; // get width of step
var start_pt = 0; // start at beginning
var prev_pt = curve.getPointAtLength(0); // measure first step


t.textContent = ""; // clear up original text;

for (var i = 0; i < t_text.length; ++i) { // char loop
    var new_pt = curve.getPointAtLength(start_pt); // measure pt
    var ts = genTspan(t_text[i], prev_pt, new_pt); // tspan
    t.appendChild(ts); // add to <text>

    start_pt += steps; // go to next step (point)
    prev_pt = new_pt; // remember previous point
    }

function genTspan(myChar,prev_pt,new_pt) {
    var tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
    tspan.setAttributeNS(null, 'dy', new_pt.y - prev_pt.y); 
    tspan.textContent = myChar;
 return tspan;
 }

哦，不！，跳舞的文字到了！
，这确实有助于我实现在路径上保持文本水平，但在尝试使用SVG的textpath对其设置动画时却没有；尝试使显示的文本保持在x=“0”y=“0”位置而不移动

与通过其路径移动时旋转其角度的方式不同；这一个实际上按照预期进行了动画制作，下面是它的代码：

<svg>
    <path id="myPath2" fill="none" stroke="#FFFFFF" stroke-miterlimit="10"
    d="M91.4,344.2c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3
c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7
c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.5
c1.9-2.1,3.7-5.5,6.5-6.5"/>
<text fill="red">
    <textpath xlink:href="#myPath2" >
    PUMCHY PUMCHY PUMCHY PUMCHY!
    <animate attributeName="startOffset" from="100%" to ="-100%" begin="0s" 
    dur="10s" repeatCount="indefinite" keyTimes="0;1" calcMode="spline" keySplines="0 0 1 1"/>
    </textpath>
</text>
</svg>


砰砰砰砰砰砰砰砰！
使用
无法保持字符垂直。但如果使用运动路径（即
），则可以执行此操作

然而，这有点痛苦，因为你必须单独设置每个角色的动画



!
Y
H
C
N
U
P
也许您可以为动画文本添加代码。这显示了一些研究工作，并将使其他人轻松得到答案。@Bodo感谢您的建议；我刚刚编辑了主帖子，添加了我在之前附的两张图片中显示的代码。我发现了一些东西，但不幸的是，它看起来像字形方向被限制在0、90、180和270度。也许你可以沿着路径发送字符，而不是整个字符串，并设置行行进方向？@Bodo我很早就测试过了，不幸的是，当使用SVG的文本路径设置文本动画时，它对文本不起作用。虽然我需要一个快速的答案，因为我需要这个答案才能参加比赛，但这项技术被证明是有用的；实际上，还可以使用javascript对其进行调整，以避免重复长代码；我可能很快会在主帖子中发布该解决方案；非常感谢你，Paul LeBeau！=D