SVG et JavaScript : texte SVG animé

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émént HTML a qui on peut appliquer un dégradé linéaire CSS.

Le texte dans le canevas SVG est mis en forme via une classe nommée forme.

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

Comme les dimensions du canevas ne sont exprimées en pixels mais en pourcentage dans le cadre du responsive web design, je ne peux récupérer ces dimensions pour le script.

Pour le script le canevas fait 900 par 100 (valeurs du viewBox).

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