蛇的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>