SVG animacja w węża

Question

Próbuję animowanie węża w sposób tekst, używając SVG tak:

Moje cele to zrobić ożywione tekstu, ale w tym samym miejscu. I już to zrobił:

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>

Jak widać, animacja porusza się do < - jak rozwiązać ten problem?

Answer 1

Użyj ++ zamiast -, a następnie gdy offsetValue osiągnie wartość 240 (pierwotna wartość początkowa po przejściu do tyłu), przestań ją zwiększać.

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>