Animation carte SVG ?

Animation carte SVG ? - HTML/CSS - Programmation

Marsh Posté le 25-01-2018 à 10:49:22    

Bonjour,
 
 
Je viens vers vous pour une question (ou plusieurs...) concernant la réalisation, ou plutôt le codage css, d'une petite carte interactive dessinée en SVG.
 
La plupart des tutos sur le net traitent de cartes assez simples, avec des zones unicolores, sans aucune informations/dessins.  
Par ex ce petit tuto : https://edutechwiki.unige.ch/fr/Carte_interactive_SVG
 
Ces zones sont donc des "éléments SVG" assez simples, sur lesquels on crée des évènements de type on.mouseover, on.click notamment...
 
Exemple visuel sur un élément :  
 
https://reho.st/self/7c6e63e37084395adc49d0c0c62e000720b71806.png
 
Ici au mouseover on fait changer la couleur du SVG, et on fait afficher un texte.
 
 
 
Mais que se passe-t-il dès qu'on veut un élément plus riche qu'un simple SVG contour de territoire ? Par exemple :
 
1. Si on veut ajouter des villes :  
 
https://reho.st/self/03ab22e816fc0208a1dad016415335ddbaa520dc.png
(Ici, au mouseover, les opacité des textes-villes s'estompent)
 
 
2. Si on veut ajouter un logo/dessin :  
 
https://reho.st/self/114236bac0d7a169fd7eebecf976c7ac98437bee.png
(au mouseover le logo passe de niveau de gris à couleurs + il est zoomé)
 
 
Pour donc au final avoir un rendu de ce type :  
 
https://reho.st/self/2cdf899ee21e2f1f478f815dad0928ab51d2d956.png
 
 
 
Quelle est la méthode ?
Comment, à la base, "dessiner" ces éléments : doivent-ils êtes vectoriels, ou du coup on s'en fout ? Faut-il les traiter comme des images (jpg) qui servent de remplissage dans le SVG ?
 
Bref, quelle est la méthodologie ?


Message édité par toum_toum le 25-01-2018 à 19:20:17

---------------
"Le loup n'a tort que quand il n'est pas le plus fort"
Reply

Marsh Posté le 25-01-2018 à 10:49:22   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed