SVG : animation d'un texte SVG avec CSS

calaisplongee.free.fr

Le code SVG

<svg width="80%" height="auto" viewBox ="0 0 800 120" > <text x ='100' y ='60' width = '600' height = '60' >calaisplongee.free.fr</text> </svg>

Le code CSS

    
	svg{background : aqua; box-shadow : 10px 10px 10px gray ;}
	text{font-family : arial ; font-weight : bold ;	font-size : 60px ;  text-shadow : 5px 5px 5px grey ;fill : navy; }
	@keyframes alterne
	{ 
		0% {transform:translateX(-700px); }
		50%{transform : translateX(0px);}
		100% {transform : translateX(700px);}
	}
	text{animation : alterne 10s 0s infinite linear alternate;}

L'élément SVG est une balise HTML donc on peut appliquer à cet élément les propriétés background, box-shadow !

La propriété text-shadow est compatible avec le format SVG !
Retour menu