Carte interactive en SVG

Voir la vidéo

Dans ce tutoriel nous allons voir une nouvelle méthode pour créer une carte interactive en HTML / CSS et JavaScript. Le principe est d'utiliser un SVG pour dessiner la carte et détecter les zones sélectionnables.

L'ancienne méthode

Pour créer le même effet précédemment on utilisait une image avec une <map> pour détecter la région sélectionné. Cette méthode posait plusieurs problèmes :

  • Il faut créer une image par région sélectionnée
  • Il faut dessiner la zone par dessus l'image
  • L'image n'est pas facilement redimensionnable

Le SVG

Le SVG permet de solutionner les problèmes précédent. En effet, il est possible de coller le code de l'image dans l'HTML pour ensuite sélectionner les zones en CSS ou JS. Il est ainsi important de concevoir le SVG d'une certaines manière afin de se faciliter la vie par la suite :

  • Il faut créer une forme par région
  • Bien nommer les formes (ces noms seront utilisés comme ID)
Publié
Technologies utilisées
Auteur :
Grafikart
Partager