How to make animation with SVG or CSS of a text walking along the path?
I have an SVG which is a text aligned on a Path. But my intention is to make the text "running" through Path, like a Marqueer .
The idea would be something like this image.
But what I managed was to animate the entire element "running" through Path, and not just the text running through Path
Text aligned on the 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 that I tried and 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>1 answers
I have found a solution and will try to explain it in parts to facilitate.
My first mistake is with the SVG structure, for this type of animation I do not need to put the <path> inside the <defs>, and my text does not need to be inside the <textPath> since it is in the animateMotion that I will define in which <path> the <text> will align.
Step 1
So my initial structure would look like this just like <path> and <text> inside 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 yes begins the process of setting up the animation. first I create the and inside 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 you need to use text-anchor="middle" in <text> here is more info 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>Step 4 Final
Now I can't say if it would be the best practice, but it was the only way I found... As I want the text to follow exactly the curvature of the line as in the example image in the question I needed to use rotate="auto" in addition I also needed to separate the text by words, if you leave the entire sentence in an animation only the result would be strange, because the sentence would not" span " correctly following the path
After that as one word comes after another I needed to make a delay manual for each word. in SVG this is done with begin="n" which means a delay before the start. So for each word that was entering I needed to increase the value of n
The end result was like this: I did not make the whole sentence pro code not get too big...
note: I took the color of path with stroke="none"
Image code 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>