Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Dans le cadre du SMIL nous avons vu les balise animate, animateMotion, animateTransform. Mais il y a aussi la balise set. Cette balise permet de fixer une valeur pendant un certain laps de temps.
Le thème sera un feu tricolore qui doit successivement passer du vert à l'orange puis au rouge.
Soyez patient, comme vous l'êtes en tant que conducteur : le feu reste vert 10 secondes puis orange 3 secondes et enfin rouge
durant 7 secondes.
Pour chaque rond, je manipule la propriété fill-opacity ; j'aurai pu manipuler la propriété visibility.
J'anime d'abord le rond vert, puis le rond orange, puis le rond rouge et le cycle reprend !
Inkscape propose un outil très intéressant : la vectorisation.
La vectorisation de photos (images matricielles) donnent à celles-ci un aspect artistique.
La vectorisation en une seule passe donne une esquisse en noir et blanc alors que la vectorisation en N passes produit
une aquarelle avec autant de couleurs (ou nuances de gris) que de passes.
Le poids de image vectorisée est fonction du nombre de passes ; léger avec une seule passe (simple esquisse) et
plus lourd avec plusieurs passes. En effet le nombre de chemins de l'image vectorisée est fonction du nombre de passes demandées
lors de la vectorisation.
Mon article sur la vectorisation des photos via Inkscape
Ce document comprend 8 calques avec une image vectorielle incorporée (liaison) dans chaque calque.
Un calque est un groupement d'objets via la balise double G.
Un calque est visible ou masqué. En effet la balise G début a l'attribut STYLE avec pour contenu : "visibility : hidden / visible".
Via Inkscape j'ai vectorisé 8 photos ; j'ai donc obtenu 8 images vectorielles.
Pour certains photos j'ai vectorisé en une passe et pour d'autres j'ai demandé plusieurs passes en couleurs ou en nuances de gris.
Ensuite j'ai encodé manuellement un document SVG donc via un éditeur tel NotePad. En effet le code SVG est simple et surtout
très répétitif.
Le document SVG comprend donc 8 calques (huit fois le conteneur G).
Dans chaque calque un lien vers une image vectorielle (donc un document SVG).
Observez la valeur de l'attribut begin du premier SET : "0s;a8.end". Donc on crée une boucle d'animations.
Notez que dans chaque balise IMAGE il y a l'attribut width OU height mais pas les deux pour
éviter toute déformation éventuelle.
l'attribut width / height est fixé à 400 selon que l'image est en portrait ou en paysage.
La balise SET du SMIL