6

Eu tenho um SVG que é um Texto alinhado em um Path. Porém a minha intenção é fazer o texto "correndo" pelo Path, como um Marqueer.

A ideia seria algo como essa imagem.

inserir a descrição da imagem aqui

Mas o que eu consegui foi animar o Elemento inteiro "correndo" pelo Path, e não apenas o Texto correndo pelo Path

Texto alinhado no 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>


Agora a animação que eu tentei e não deu certo...

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

5

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"

inserir a descrição da imagem aqui

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .