Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1695 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Animation carte SVG ?

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Animation carte SVG ?

n°2310408
toum_toum
Vivons masqués
Posté le 25-01-2018 à 10:49:22  profilanswer
 

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

---------------
"2025 : Stupid is now Norm"
mood
Publicité
Posté le 25-01-2018 à 10:49:22  profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Animation carte SVG ?

 

Sujets relatifs
[Résolu] stopper une animation en HTML5/JSCréer une carte dynamique
[Javascript] Aide html2canvas & SVGQuel langage pour reparation toute carte
Inserer une carte sur un sitecarte interactive
animation text avec librarie UgfxJAVA - Distribution d'un paquet de carte
JAVA - Distribution d'un jeu de carteWiki en local mais sur une carte SD
Plus de sujets relatifs à : Animation carte SVG ?


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR