SVG : la balise set

Dans le cadre du SMIL nous avons vu les balise animate, animateMotion, animateTransform mais il y a aussi la balise set.

La balise set permet de fixer une valeur pendant une certaine durée de temps.

Le premier rectangle (rempli de rose) reste affiché seulement durant 5 secondes puis disparaît.
Le deuxième rectangle (rempli de vert transparent) devient vert opaque dès qu'il est survolé par la souris.
Le premier cercle (fond jaune) voit sa taille doubler si il est cliqué.
Le deuxième cercle (fond vert) voit sa taille doubler et le fond passer au rouge si il est survolé par la souris.

Le code SVG (extrait)

A vous de compléter l'instruction set correspondant au quatrième objet (deuxième cercle).

<svg width="60%" height="auto" viewBox ="0 0 600 600"> <rect x="0" y="0" width="200" height="100" style="fill :pink ; visibility: hidden" id = "objet1"> <set attributeName="visibility" attributeType ="CSS" to="visible" begin="0" dur="5s"/> </rect> <rect x="200" y="200" width="200" height="100" fill = "green" fill-opacity = "0.2" id = "objet2"> <set attributeName ="fill-opacity" attributeType ="XML" to="1" begin = "objet2.mouseover" end = "objet2.mouseout"/> </rect> <circle cx="300" cy="400" r ="50" fill = "yellow" id = "objet3" > <set attributeName="r" attributeType ="XML" to="100" begin="objet3.click" end ="objet3.mouseout"/> </circle> <circle cx="300" cy="550" r ="50" style ="fill : green;" id = "objet4" > <set attributeName="r" attributeType ="XML" to = "100" begin=... end =.../> <set attributeName="fill" attributeType ="CSS" to="red" begin=... end =... /> </circle> </svg>le

Commentaire du code

Remarquez qu'avec l'instruction set l'attribut from est inutile.

Notez que pour 3 objets sur 4 l'animation set est liée à un événement sur cet objet (survol ou clic). Il est alors impératif d'identifier l'objet afin de pouvoir programmer des événements sur cet objet. Dans ce cas l'attribut end se substitue à l'attribut dur.

Dans le deuxième cercle la couleur de remplissage est passée en propriété de style donc pour l'animation correspondante le type est "CSS" !
Remarquez que pour le deuxième rectangle l'opacité de la couleur de remplissage a été passée en attribut.Donc pour la balise set correspondante la valeur de attributeType doit être "XML" ! Retour menu