Encontrei uma solução e vou tentar explica-la em partes para facilitar.
Meu primeiro erro é com a estrutura do SVG, para esse tipo de animação eu não preciso colocar o <path>
dentro do <defs>
, e o meu texto não precisa estar dentro do <textPath>
já que é na animateMotion
que eu vou definir em qual <path>
o <text>
vai se alinhar.
Passo 1
Então minha estrutura inicial ficaria assim apenas como o <path>
e o <text>
dentro do SVG
<svg width="370px" height="155px">
<path id="myPath2" fill="none" stroke="black" stroke-miterlimit="10" d="M20,20 l100,0 l100,30 q0,100 150,100" />
<text fill="red">
Meu texto longo correndo pelo caminho... #sqn :(
</text>
</svg>
Passo 2
Agora sim começa o processo de configurar a animação. primeiro eu crio a e dentro dela uso o <mpath xlink:href="#"/>
para definir meu <path id="#">
<svg width="370px" height="155px">
<path id="meuPath" fill="none" stroke="black" stroke-miterlimit="10" d="M20,20 l100,0 l100,30 q0,100 150,100" />
<text fill="red">
Meu texto longo correndo pelo caminho... #sqn :(
<animateMotion dur="6s" repeatCount="indefinite">
<mpath xlink:href="#meuPath"/>
</animateMotion>
</text>
</svg>
Passo 3
Agora eu preciso ancorar o "centroide" do texto, para isso é preciso usar text-anchor="middle"
no <text>
aqui tem mais infos sobre isso: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor
<svg width="370px" height="155px">
<path id="meuPath" fill="none" stroke="black" stroke-miterlimit="10" d="M20,20 l100,0 l100,30 q0,100 150,100" />
<text fill="red" text-anchor="middle">
Meu texto longo correndo pelo caminho... #sqn :(
<animateMotion dur="6s" repeatCount="indefinite">
<mpath xlink:href="#meuPath"/>
</animateMotion>
</text>
</svg>
Passo 4 Final
Agora já não sei dizer se seria a melhor prática, mas foi a única forma que encontrei... Como eu quero que o texto segua exatamente a curvatura da linha como na imagem de exemplo na Pergunta eu precisei usar rotate="auto"
além disso também precisei separa o texto por palavas, se ueu deixa-se a frase inteira em uma animação só o resultado ficaria estranho, pois a frase não "envergaria" seguindo corretamente o path
Depois disso como uma palavra vem após a outro eu precisei fazer um delay manual pra cada palavra. no SVG isso é feito com begin="n"
que significa um delay
antes do início. Então para cada palavra que foi entrando eu precisei ir aumentando o valor de n
O resultado final ficou assim: Não fiz a frase inteira pro código não ficar muito grande...
OBS: Tirei a cor do path
com stroke="none"

Código da imagem acima:
<svg width="370px" height="155px">
<path id="meuPath" fill="none" stroke="none" stroke-miterlimit="10" d="M20,20 l100,0 l100,30 q0,100 150,100" />
<text fill="red" text-anchor="middle">
:)
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
<mpath xlink:href="#meuPath"/>
</animateMotion>
</text>
<text fill="red" text-anchor="middle">
jovem
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto" begin="0.5s">
<mpath xlink:href="#meuPath"/>
</animateMotion>
</text>
<text fill="red" text-anchor="middle">
sim
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto" begin="1.05s">
<mpath xlink:href="#meuPath"/>
</animateMotion>
</text>
<text fill="red" text-anchor="middle">
Agora
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto" begin="1.6s">
<mpath xlink:href="#meuPath"/>
</animateMotion>
</text>
<!-- assa linha é apenas para visualização onde o texto deve correr -->
<!-- <path d="M20,20 l100,0 l100,30 q0,100 150,100" style="stroke: #000000; fill:none"/> -->
</svg>
<br>
<svg width="400px" height="200px">
<path id="meuPath2" fill="none" stroke="black" stroke-miterlimit="10"
d="M1.4,14.2c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3
c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7
c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.5
c1.9-2.1,3.7-5.5,6.5-6.5"/>
<text fill="red" text-anchor="middle">
meu
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
<mpath xlink:href="#meuPath2"/>
</animateMotion>
</text>
<text fill="red" text-anchor="middle">
texto
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto" begin="0.6s">
<mpath xlink:href="#meuPath2"/>
</animateMotion>
</text>
</svg>