SVG et JavaScript : texte SVG animé

Club de plongée de Calais

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; } img {height : 100px ; } ... <table> <tr> <td><img src = "../images/ffessm.jpg"></td> <td> <svg width="700" height="100" style = 'background : linear-gradient( 75deg, navy, aqua,white );'> <text x= "1000" y ='60' width = '600' height = '60' class ='forme'>Club de plongée de Calais</text> </svg> </td> <td><img src = "../images/logo_club.jpg"></td> </tr></table> ...

CSS : la zone de dessin SVG a un fond 'navy' qui dégrade vers le blanc en passant par 'aqua'. Ce dégradé linéaire a été réalisé en CSS !
Le contenu de la balise SVG text est mis en forme au niveau de la feuille de style en particulier avec une classe nommée forme.

SVG : la bannière comprend deux images jpg et au milieu la zone de dessin SVG. Ces trois éléments sont disposés dans un tableau HTML ayant une seule ligne avec trois cellules.

Ici les dimensions du canevas SVG ne sont pas exprimées en pourcentage mais en pixels !

Le script de la page

var svg = document.querySelector('svg') ; var text = document.querySelector('text'); X = svg.getAttribute('width') ; Y = svg.getAttribute('height'); // X et Y récupèrent les dimensions du canevas var x = X ; var largeur = text.getAttribute('width'); var boucle = setInterval(animate,10); function animate() { x = x-1 ; if (x <= largeur *-1) x = X ; text.setAttribute('x',x); } // fin fonction animate

Comme les dimensions du canevas sont exprimées en pixels je peux récupérer ces données avec la méthode getAttribute.
Donc même si je modifie les dimensions du canevas je n'ai pas à modifier le 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 (car x égal à -600(largeur du texte)) alors le texte réapparaît à l'extrème droite (car x = X (qui vaut 700(largeur de la zone SVG)).


Retour menu