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="10" /> <animate attributeName="fill-opacity" attributeType ="CSS" values = "0.1;1;0.1" begin ="0s" dur="30s" repeatCount="10" /> </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 10 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 et comprend de nombreux attributs.

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

Concernant la deuxième balise animate vous constatez que la valeur de l'attribut attributType est "CSS". En effet l'opacité de la forme a été passée en propriété CSS (via l'attribut style) et non pas en attribut.

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