蛇的SVG动画

Question

我尝试使用SVG以蛇形方式制作动画，如下所示：

我的目标是使文本生动，但在同一个地方。我已经这样做了：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

正如您所看到的，动画正在转移到＆lt; - ，如何解决这个问题？

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>