How to do animation with SVG or CSS of a Text walking along the path?

Question

How to do animation with SVG or CSS of a Text walking along the path?

Navigation

#1 by (2 votes)

5

I have an SVG which is a Text aligned in a Path . But my intention is to make the text "running" by Path , like a Marqueer .

The idea would be something like this image.

ButwhatIwasabletodowasanimatetheentireElementby"running" by Path , not just Text running through Path

Text aligned in 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 did not work ...

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

html5 css css3 svg

asked by anonymous 28.11.2018 / 12:36

1 answer

Color scale adjustment in R How to insert records through cursor?

score 2 · Answer 1

I found a solution and I'll try to explain it in parts to make it easier.

My first error is with the structure of SVG, for this type of animation I do not need to put <path> inside <defs> , and my text does not have to be inside <textPath> since it is in animateMotion that I will set in which <path> <text> will align.

Step 1

Then my initial structure would look like this only as <path> and <text> within 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 configuring the animation begins. first I create a and within it I use <mpath xlink:href="#"/> to set 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, so I need to use text-anchor="middle" in <text> here is more infos about this: link

<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 not tell if it would be the best practice, but it was the only way I found it ... How do I want the text to follow exactly the curvature of the line as in the example image in Question I needed to use rotate="auto" beyond I also needed to separate the text by words, if you leave the whole sentence in an animation, the result would be strange, because the phrase would not "enslave" correctly following the path

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

The final result looks like this: I did not make the whole code for the code does not get very large ... OBS: I took the color of path with stroke="none"

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