SVG animazione serpente

Question

Sto cercando di animare in modo serpente un testo, utilizzando SVG, in questo modo:

miei obiettivi è rendere l'animare il testo, ma nello stesso posto. Ho già fatto questo:

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>

Come si può vedere, l'animazione si sta muovendo per il < -, come risolvere questo problema?

Answer 1

Utilizzare ++ anziché -, quindi una volta che offsetValue ha raggiunto 240 (il valore iniziale iniziale quando si è retrocesso) interrompere l'incremento.

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>