SVG : animation d'un texte avec balise animate

Animer SVG avec le SMIL !

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; } ... <h1>SVG : animation d'un texte avec balise animate</h1> <svg width="100%" height="auto" viewBox ="0 0 900 100" style = 'background : linear-gradient( 75deg, navy, aqua,white );'> <text y ='60' width = '600' height = '60'>Animer SVG avec le SMIL ! <animate attributeName="x" values = "-900;900;-900" begin ="0s" dur="20s" repeatCount="indefinite" attributeType ="XML"/> </text> </svg> ...

Commentaire du code

CSS : La balise SVG est un élémént HTML a qui on peut appliquer un dégradé linéaire CSS.

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