SVG : modifier le rayon et l'opacité d'un rond

Actualisez la page pour redémarrer l'animation !

Le code SVG de la page

<svg width="50%" height="auto" viewBox ="0 0 400 400" style ="background : yellow" > <circle cx="200" cy="200" fill = 'red' style ="fill-opacity : 0.1;"> <animate attributeName="r" attributeType ="XML" values = "1;200;1" begin ="0s" dur="30s" repeatCount="2" /> <animate attributeName="fill-opacity" attributeType ="CSS" values = "0.1;1;0.1" begin ="0s" dur="30s" repeatCount="2" /> </circle> </svg>

Commentaire du code

Le rond grossit progressivement pour atteindre un rayon maximum puis diminue pour atteindre un diamètre minimum et le cycle recommence mais ne se répète que deux fois.
Dans le même temps il est de plus opaque puis de plus en plus transparent et le cycle reprend mais ne se répète lui aussi de que deux fois.

Examinons le code SVG !
La balise circle inclut deux fois la balises animate.
La balise animate est le "couteau suisse" de l'animation en SVG.
La balise animate comprend de nombreux attributs.

Si il n'y a que deux valeurs on peut remplacer l'attribut values par les attributs from et to.

Concernant la deuxième balise animate comme on modifie la valeur de l'opacité et que ce paramètre a été passé en propriété de style (et non pas en attribut) la valeur de l'attribut attributeType est CSS.

La balise animate comprend d'autres attributs que nous allons aborder dans les pages suivantes : end, fill, repeatDur, etc.
Retour menu