Sommaire partiellement masqué - faites défiler !
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Nous allons aborder dans cette page une technique très utile : les calques.
Instruction HTML pour insérer ce document Inkscape :
<img src ="chaumiere.svg" class="grand" style ="border : 15px solid gold; box-shadow : 20px 20px 20px gray;" >
Ainsi l'image ressemble à un beau tableau avec son cadre.
Ici les trois calques sont visibles mais ce n'est pas obligatoire.
L'une des astuces pour animer un document Inkscape est de masquer/démasquer les calques : voir exemple 2 dans ce chapitre.
Il n'est pas obligatoire d'utiliser les calques. Mais leur emploi facilite énormément le travail du graphiste.
Par défaut un document Inkscape a un seul calque appelé calque1.
Si un document ne comprend qu'un calque il contient forcément de nombreux objets et donc la sélection d'un de ces objets devient des plus délicate. La crise de nerfs est assurée ...
Donc l'astuce est de répartir les objets sur plusieurs calques.
Quand vous pensez avoir finalisé le premier calque vous le verrouillez et vous en ajouter un au dessus.
Ainsi vous êtes assuré que les modifications ne concerneront que le calque courant.
Vous verrouillez le deuxième calque puis vous en ajoutez un troisième et ainsi de suite ...
Taille de ce nouveau document de 900 pixels par 900.
Aperçu :
Des rectangles floutés (ciel et sol) et des ellipses floutées (nuages)
Aperçu :
La maison : des rectangles floutés puis convertis en chemins afin de pouvoir les transformer en trapèzes par déplacement de certains noeuds.
L'arbre : aucune difficulté.
Aperçu :
Emploi du "crayon" pour dessiner à main levée en particulier pour créer le chemin vers la porte.
Le chemin vers la porte est justement un "chemin" dans le jargon SVG & Inkscape.
Pensez simplifier ce chemin ; commande : Chemin/simplifier
Ensuite vous le sélectionnez pour le remplir de gris et supprimer son contour.
Lorsque vous travaillez sur le deuxième calque vous pouvez non seulement verrouiller le premier calque mais aussi le masquer ainsi vous ne voyez que les formes que vous pouvez manipuler dans le cadre du calque courant.
Vous n'êtes pas obligé d'utiliser le menu "Calque" pour masquer/ démasquer OU verrouiller/déverouiller un calque.
En cliquant sur ces icônes vous faites basculer le calque courant d'un état à un autre.
En fait un calque SVG c'est un regroupement d'objets grâce à la balise G.
Ci-dessous un exemple simple de document Inkscape avec des calques.
Le code correspondant :
Normalement ce sont les objets du calque "calque2" qui doivent apparaitre puisqu'ils sont écrit après ceux de "calque1".
Mais ici "calque2" est masqué (display ; none).
Dans le cadre du format SVG on ne peut pas utiliser la propriété z-index pour gérer la superposition. Mais cela devrait changer avec
la version 2 de SVG ...
Remarquez que Insckape n'utilise par la balise circle pour dessiner un cercle mais ellipse avec rx = ry.
Je dirai même une animation cartographique ...
Le principe de l'animation repose sur les calque !
Le document Inkscape comprend quatre calques. Grâce à un script trois calques sur quatre sont masqués.
Cliquez successivement sur "Relief", "Fleuves", "Rail" et "Routes" et observez.
Donc successivement vous voyez le relief de la France puis les fleuves, puis la France ferrovière et enfin la France routière
Et jamais les quatre cartes en même temps ne se superposent, ce qui serait illisible.
Il s'agit d'un fichier SVG mais contenant aussi un script.
J'ai créé un nouveau document et j'ai incorporé (donc dans "calque1") une image matricielle correspondant au relief de la France.
J'ai masqué "calque1" puis j'ai ajouté un nouveau calque ("calque2") et j'ai incorporé une autre image bitmap (celle correspondant aux fleuves).
J'ai masqué "calque2" puis j'ai rajouté un troisième calque ("calque3") et j'ai incorporé une troisième image matricielle (celle sur les chemins de fer).
J'ai masqué "calque3" puis j'ai rajouté un quatrième calque et j'ai incorporé la quatrième image (le réseau routier).
Ensuite j'ai produit la commande Edition /éditeur XML afin de modifier les ID des différents calques :
Extrait du code SVG à ce stade :
Ci-dessous un extrait du code correspondant au premier calque. Notez bien la valeur de l'attribut ID et de l'attribut STYLE.
Je me méfie de l'outil "texte" de Inkscape ; le code généré n'est pas du standard ...
Je préfère travailler "en manuel" d'autant que ça ne pose vraiment pas de difficulté.
Donc j'ai rajouté le code SVG suivant qui correspond au texte.
Pourquoi y vaut 250 ? Car les valeurs du viewBox sont : "0 0 336 257".
Notez bien que chaque texte a un ID : "b_relief", ... "b_routes".
Il faut aussi rendre l'image responsive. Je modifie donc les valeurs de l'attribut width.
Il faut maintenant rajouter un script afin que sur les quatres calques il y en ait toujours qu'un seul visible (display : block) et les autes étant masqués (display : none).
Le script (sans la balise SCRIPT) :
Le script est rajouté en fin de document mais juste avant la balise fermante :
Le code JavaScript ne pose pas de difficulté : quatre fonctions anonymes qui se ressemblent beaucoup à un détail près ...
Chaque calque est identifié. Dans chaque fonction trois calques sont masqués ("display : none" en JS) et un seul est affiché ("display: block" en JS).
Le document Inkscape est un peu lourd : 800 KO mais c'est logique puisqu'il intégre l'équivalent de 4 images matricielles.
Attention ce document contient un script ; il faut donc impérativement l'insérer avec la balise OBJECT.
Si vous insérez avec IMG le script sera inopérant ...