Animation d'un texte SVG via JavaScript

Animez le SVG avec JS !

Le code CSS & SVG de la page

... text{font-family : arial ; font-weight : bold} .forme{font-size : 60px ; text-shadow : 5px 5px 5px grey ; stroke : navy ; stroke-width : 2px ; fill : aqua; } </style> ... <h1>SVG et JavaScript : texte SVG animé</h1> <svg width="100%" height="auto" viewBox ="0 0 900 100" style = 'background : linear-gradient( 75deg, navy, aqua,white );'> <text x= "900" y ='60' width = '600' height = '60' class ='forme'>Animez le SVG avec JS !</text> </svg> ...

La balise SVG est un élément HTML donc on peut lui appliquer un dégradé linéaire CSS.
Notez les valeurs du viewBox : 900 & 100.
Rien n'interdit d'attribuer une classe à un élément SVG. C'est ce que je fais ici avec la classe "forme".
La propriété CSS text-shadow peut s'appliquer à un élément SVG (mais pas box-shadowx).

Le script de la page

	var svg = document.querySelector('svg') ; 
	var text = document.querySelector('text'); 
	X = 900;
	Y = 100;
	var x = X ; 
	var boucle = setInterval(animate,10); 
	function animate() 
	{
		x = x-1 ; 
		if (x <=-600) x = X ; 
		text.setAttribute('x',x); 
	} // fin fonction animate

Pour le script le canevas fait 900 par 100 (valeurs de X & Y). Il est difficile de récupérer ces valeurs via la script.

La fonction animate est appelée toutes les 10 millisecondes (donc 100 fois par seconde). Dans cette fonction on change l'attribut x de la balise text. Dès que le texte a disparu à gauche il réapparait à l’extrême droite.
Retour menu