How to make animation with SVG or CSS of a Text walking the way?

Question

I have an SVG that is a Text aligned on a Path. But my intention is to do the text "running" by Path, as a Marqueer.

The idea would be something like this image.

But what I got was to animate the whole Element by "running" through Path, and not just the Text running through Path

Text aligned on TextPath

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" width="100%">
  <defs>
      <path id="TextPath" d="M75,20 l100,0 l100,30 q0,100 150,100" style="stroke: #000000;"/>
  </defs>
  
  <text x="10" y="100" style="stroke: #000000;">
      <textPath xlink:href="#TextPath">
          Meu texto longo correndo pelo caminho... #sqn :(
      </textPath>
  </text>
  <!-- assa linha é apenas para visualização onde o texto deve correr -->
  <path d="M75,20 l100,0 l100,30 q0,100 150,100" style="stroke: #000000; fill:none"/>
</svg>

---

Now the animation I tried and it didn’t work out...

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" width="100%">
  <defs>
      <path id="myTextPath2" d="M75,20 l100,0 l100,30 q0,100 150,100"/>
  </defs>
  
  <text x="10" y="100" style="stroke: #000000;">
      <textPath xlink:href="#myTextPath2">
          Meu texto longo correndo pelo caminho... #sqn :(
      </textPath>
      <animateMotion
      path="M75,20 l100,0 l100,30 q0,100 150,100"
      begin="0s" dur="5s" repeatCount="indefinite"
      
      />
  </text>
    <!-- assa linha é apenas para visualização onde o texto deve correr -->
    <path d="M75,20 l100,0 l100,30 q0,100 150,100" style="stroke: #000000; fill:none"/>
</svg>

Answer 1

I found a solution and I will try to explain it in parts to facilitate.

My first mistake is with the SVG structure, for this kind of animation I don’t need to put the <path> within the <defs>, and my text does not need to be within the <textPath> since it is in the animateMotion that I will define in which <path> the <text> will align.

Step 1

Then my initial structure would look just like the <path> and the <text> within the 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>

---

Step 2

Now the process of setting up the animation begins. first I create and within it I use the <mpath xlink:href="#"/> to define my <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>

---

Step 3

Now I need to anchor the "centroid" of the text, for this it is necessary to use text-anchor="middle" in the <text> here is more information about this: 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>

---

Final Step 4

Now I can’t say if it would be best practice, but it was the only way I could find... As I want the text to exactly follow the curvature of the line as in the example image in the Question I needed to use rotate="auto" besides that I also needed to separate the text by Palavas, if ueu leaves the whole sentence in an animation only the result would be strange, because the phrase would not "shame" following correctly the path

After that as one word comes after another I needed to make one delay manual for each word. in the SVG this is done with begin="n" which means a delay before the start. So for every word that came in I needed to increase the value of n

The end result was like this: I didn’t make the whole sentence so the code doesn’t get too big...
OBS: I took the color of path with stroke="none"

Code of the image above:

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