11-05-2016, 11:46 PM
N'importe quelle image fonctionne. Le principe est de créer un objet "pattern" en SVG, qui est une texture qui sera posé sur un autre objet SVG (le polygone de contour par exemple). La texture (le pattern) peut donc contenir n'importe quoi (des <image/>, des <circle> etc).
L'effet, dans ton cas, serait simplement d'ajouter un contour au polygone délimitant ta zone: le polygone est toujours affiché, mais est transparent en temps normal et sans contour. Quand tu passes ta souris dessus, le style du polygone change (ce qui peut donc être fait en CSS): on définit alors un contour, qui semble "apparaitre" (puisqu'on ne voyait pas le polygone avant). L'image serait donc un arrière-fond statique, avec des polygones transparents devant qui sont stylisés pour avoir un contour quand la souris leur passe dessus.
Autre exemple avec une texture de fond
Si tu regardes les sources, tu verras un <circle> pour la planète, avec un CSS:fill permettant de mettre une texture dessus (+ un CSS:filter pour l'effet sphérique, mais cela ne te concerne pas). Un autre <circle> est placé par-dessus, et est transparent. Son contour est définit à "gold" quand la souris passe dessus, ce qui donne l'impression que la zone est "entourée" quand on la survole (en fait, c'est un "masque" devant la carte / devant la planète qui est entouré et non la carte elle-même).
L'effet, dans ton cas, serait simplement d'ajouter un contour au polygone délimitant ta zone: le polygone est toujours affiché, mais est transparent en temps normal et sans contour. Quand tu passes ta souris dessus, le style du polygone change (ce qui peut donc être fait en CSS): on définit alors un contour, qui semble "apparaitre" (puisqu'on ne voyait pas le polygone avant). L'image serait donc un arrière-fond statique, avec des polygones transparents devant qui sont stylisés pour avoir un contour quand la souris leur passe dessus.
Autre exemple avec une texture de fond
Si tu regardes les sources, tu verras un <circle> pour la planète, avec un CSS:fill permettant de mettre une texture dessus (+ un CSS:filter pour l'effet sphérique, mais cela ne te concerne pas). Un autre <circle> est placé par-dessus, et est transparent. Son contour est définit à "gold" quand la souris passe dessus, ce qui donne l'impression que la zone est "entourée" quand on la survole (en fait, c'est un "masque" devant la carte / devant la planète qui est entouré et non la carte elle-même).