Accueil
Mes tutoriels sur la programmation

Dessiner avec SVG - sommaire


Coder en SVG

Dessins statiques

Le format SVG Les formes de base Les chemins Gestion du texte La balise image L'attribut viewBox pour des canevas responsives Dégradés, motifs, masques et découpes Modèle et clonage de modèle Les transformations Les filtres en SVG

Dessins animés

La balise animate Compléments sur la balise animate Balise animatemotion Balise animatetransform Balise set Animer via JavaScript Animer via CSS Un jeu - le squash Comparaison SVG & Canvas

Le framework Snap SVG

Découverte du framework Plus loin avec Snap SVG Les filtres avec Snap SVG Les dégradés avec Snap SVG Chemins, masques & découpes en Snap SVG Animations avec Snap SVG - introduction Animations avec Snap SVG - enchainer, répéter à l'infini Animations avec Snap SVG - animations génériques - les événements Animations avec Snap SVG - progression de l'animation

Vous pouvez me contacter via Facebook (questions, critiques constructives) : page Facebook relative à mon site

SVG & SMIL : 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 un certain laps 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" !