Tracer la carte

Bon, maintenant il est temps de passer aux choses sérieuses.

Pour commencer, on va définir notre image, qui pour des raisons de ré-utilisabilité des coordonnées aura les mêmes dimensions que le fond de carte utilisé précédemment.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="432" height="463" viewbox="0 0 432 463" id="map">
</svg>

Dans cette image SVG on rajoute alors une région :

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="432" height="463" viewbox="0 0 432 463" id="map">
<polygon points="263,127 263,135 253,136 247,146 234,143 230,135 218,135 205,122 204,113 202,110 203,99 210,97 222,94 228,98 233,95 238,101 257,103 257,99 266,112 268,123 263,127" />
</svg>

Avec le code ci-dessus, on obtient le résultat suivant :

Pour obtenir le résultat souhaité, il suffit de rajouter une règle CSS pour styliser tous nos polygones :

polygon {
	stroke: #000;
	stroke-width: 1;
	fill: #fff;
}

Une fois le style défini on obtient ce nouveau résultat :

Pour changer la couleur de nos formes au survol de la souris, rien de plus simple : il suffit de définir une pseudo classe :hover.
En rajoutant quelques effets de transition, notre CSS devient :

polygon {
	stroke: #000;
	stroke-width: 1;
	fill: #fff;
	transition-property: fill;
	transition-delay: .10s;
	transition-duration: .35s;
	transition-timing-function: ease-in-out;
}
polygon:hover {
	fill: #aeaeae;
}