Création de zones cliquables sur une image avec des formes irrégulières

Question

J'essaie de créer une carte-image sur une carte indienne pour un projet où un clic sur chaque état devrait mener à une autre page. À cette fin, j'ai prévu d'utiliser la carte et l'étiquette de zone. Le problème est la forme de chaque état n'est pas une figure régulière et trop de coordonnées sont nécessaires et les zones cliquables peuvent également se croiser.

Je voudrais savoir s'il y a une autre façon de réaliser cette tâche this is the image of the map i would like to work on

Answer 1

Vous pouvez utiliser des années svg pour y parvenir. J'ai créé un Codepen ci-dessous avec un échantillon de quelques états de l'Inde.

CODEPEN

CSS

<svg viewBox="0 0 300 200"> 
<a xlink:href="#"> 
    <path id="IN-HP" class="land" d="M143.6,94.2l0/> 
</a> 
</svg> 

Prenez une copie SVG libre de l'Inde ici: https://www.amcharts.com/svg-maps/