Animer une page html

Cours / TP

Identifier : pour animer un objet svg le minimum est de connaître son nom ! Le plus simple est de lui en donner un...

Identifions les éléments de notre dessin :

  1. Pour cela sélectionner un objet... le rond par exemple
  2. Clic droit >> Propriétés de l'objet
  3. Donner une valeur à l'identifiant (Id), par exemple... "rond" et cliquer sur Définir. Ne fermer pas la boîte de dialogue...
  4. Sélectionner le rectangle et changer son Id : "rectangle"
  5. Pour le texte il convient de faire une étape supplémentaire : transformer notre texte en ... texte

    Inkscape traite les objets créés avec l'outil "texte" comme des objets graphiques. Si l'objectif est de modifier le contenu du texte de manière dynamique il faut tout d'abord le convertir en texte :

    • Sélectionner le texte
    • menu Texte >>
    • Convertir en texte
    • Vous pouvez alors modifier l'Id de l'élément texte : soyons fous appelons le... "texte"

  6. Fermer la boîte de dialogue "Propriétés de l'objet"
Facile non ??

Identifions notre dessin :

Il reste un chose très important à faire : Donner un Id à votre dessin...
  • menu Edition >> Editeur XML (tout en bas)
  • sélectionner l'Id de la racine et modifier le. Personnellement j'ai remplacé "svg7458" par "svgroot"
  • Cliquer sur "Définir" et fermer la boîte de dialogue
image de la boîte de dialogue

Vous pouvez enfin sauvegarder votre fichier.
Maintenant analysons le contenu de "premier_dessin.svg"

>> Ouvrir le fichier avec Notepad++ (Clic droit sur le fichier >> Edit with Notepad++)

Parcourir le fichier à la recherche des lignes suivantes (vous devriez trouver les mêmes lignes... aux balises html prêt) :

[...]
width="376.77457"
height="242.17862"
id="svgroot"
[...]
sodipodi:type="arc"
id="cercle"
sodipodi:cx="180"
sodipodi:cy="380.93362"
sodipodi:rx="71.428574"
sodipodi:ry="71.428574"
[...]
[...]
x="109.09375"
y="256.45419"
id="texte"
[...]
id="tspan8075">Hello world !


Si c'est le cas féliciations !!! Valider cette partie

Sinon encore un petit effort...