SVG : animation d'un texte avec balise animate

calaisplongee.free.fr

Le code de la page (extraits)

<style> text{font-family : arial ; font-weight : bold ; font-size : 60px ; text-shadow : 5px 5px 5px grey ;fill : aqua; } img {width : 90%} ... <body> <table><tr> <td width ="10%"><img src = "../images/ffessm.jpg"></td> <td width ="80%"> <svg width="100%" height="auto" viewBox ="0 0 800 120" style = 'background : linear-gradient( 75deg, navy, aqua,white );'> <text y ='60' width = '600' height = '60'>calaisplongee.free.fr <animate attributeName="x" values = "-700;800;-700" begin ="0s" dur="20s" repeatCount="indefinite" attributeType ="XML"/> </text> </svg> </td> <td width ="10%"><img src = "../images/logo_club.jpg"></td> </tr></table>

Commentaire du code

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é nativement en CSS !

HTML & 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.

Le canevas SVG est contenue dans la cellule centrale du tableau.

SVG : l'animation de texte est un jeu d'enfant: le conteneur text contenant la balise animate.
L'attribut values a trois valeurs afin que texte se déplace alternativement de gauche à droite puis de droite à gauche.
Notez que les valeurs de l'attribut values peuvent être négatives afin que le texte disparaisse complètement.
Retour menu