+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Art, graphisme, audio (https://jeuweb.org/forumdisplay.php?fid=50)
+--- Sujet : [SVG] Cartes, frontières et territoires (/showthread.php?tid=4818)
[SVG] Cartes, frontières et territoires - Sephi-Chan - 13-05-2010
Bonjour,
Je cherche à réaliser une carte avec SVG. J'en ai déjà fait, mais cette fois d'autres questions me viennent à l'esprit.
Lorsque l'on dessine des des territoires sur une carte, comment gérer les bordures ?
Doit-on avoir un tracé complet pour chaque territoire ? Avec donc une répétition d'une portion du path (dans la zone où 2 territoires sont frontaliers) ?
Ou bien doit-on plutôt réaliser une zone, puis dessiner des path symbolisant les bordures ? Cette solution semble utilisée sur certaines cartes en SVG sur Wikipédia.
Je dois pouvoir gérer les comportement au survol et au click des territoires, donc la seconde solution ne me paraît pas vraiment envisageable.
Je vais peut-être réaliser cette carte à l'aide de la librairie Javascript Raphaël (qui produit du VML pour Internet Explorer), je ne crois pas avoir la possibilité d'utiliser la balise <g> pour créer des groupes.
Mon autre alternative est d'utiliser du vrai SVG et le rendre accessible à IE grâce à SVGWeb, mais ça à l'air casse-couille à scripter…
Merci d'avance et bonne journée,
Sephi-Chan
RE: [SVG] Cartes, frontières et territoires - Roworll - 17-05-2010
Bon,
Je ne suis pas sur de bien avoir compris la problématique de fond donc je vais juste préciser 2-3 trucs sur le SVG.
Chaque forme en SVG inclut de facto une bordure.
Donc, si tu as un PATH fermé, tu peux agir sur l'apparence de son remplissage (FILL) mais aussi sur celle de la bordure (STROKE).
Tu disposes pour cela de toutes les propriétés disponibles pour les bordures. En couplant cela avec des évènements JS, tu peux au survol de la zone ou au clic agir sur les propriétés de bordure et/ou de remplissage de la zone concernée.
Ainsi, tu peux tracer ton territoire avec stroke-width="0" et passer à stroke-width="1" au survol.
Du coup, je pense qu'il est inutile d'avoir des répétitions de path.
RaphaelJS ne permet pas de grouper les éléments (on peut le simuler soi-même mais c'est assez lourd). Par contre, cette bibliothèque propose dans une moindre mesure des propriétés et des comportements assez proches de ce qui existe en SVG.
Quand à SVGWeb, je n'ai pas encore regardé en profondeur.
J'ai mis un exemple accessible ici en pure SVG. Tu as trois territoires dont les contours apparaissent au survol de la souris et que tu peux sélectionner en cliquant.