javascript - 蛇中的 SVG 动画

Question

我正在尝试使用 SVG 以蛇形方式为文本制作动画，如下所示:

我的目标是使文本具有动画效果，但在同一个地方。我已经这样做了:

var textPath = document.getElementById('texto'),
    comprimento = textPath.getAttribute('startOffset');

var animador = setInterval(function () {
    comprimento--;
    textPath.setAttribute('startOffset', comprimento);
}, 10);

<svg width="400" height="400">
    <defs>
        <path id="myPath" d="m 40,130 c 0,0 60,-80 120,-80 60,0 74.00337,80 140,80 65.99663,0 80,-80 140,-80 60,0 120,80 120,80" />
    </defs>
    <text style="stroke: #000000;">
        <textPath startOffset="240" id="texto" xlink:href="#myPath">Testing this text</textPath>
    </text>
</svg>

如您所见，动画正在移动到 <-，如何解决这个问题？

Answer 1

使用++ 而不是 --，然后一旦 offsetValue 达到 240(您向后移动时的原始起始值)就停止递增。

var textPath = document.getElementById('texto'),
    comprimento = textPath.getAttribute('startOffset');

var animador = setInterval(function () {
    if (comprimento < 240) {
      comprimento++;
      textPath.setAttribute('startOffset', comprimento);
    }
}, 10);

<svg width="400" height="400">
    <defs>
        <path id="myPath" d="m 40,130 c 0,0 60,-80 120,-80 60,0 74.00337,80 140,80 65.99663,0 80,-80 140,-80 60,0 120,80 120,80" />
    </defs>
    <text style="stroke: #000000;">
        <textPath startOffset="0" id="texto" xlink:href="#myPath">Testing this text</textPath>
    </text>
</svg>