Là, ce sont des frontières dynamiques si je comprends bien (au sens où elles dépendent des évènements dans le jeu). Pour cela, deux choix: soit 1 pays = 1 ensemble de régions (ensemble pouvant n'avoir qu'un seul élément), et donc tu peux déplacer une région d'un pays à l'autre, soit il te faut générer les frontières en pure dynamique. Cela me semble bien plus difficile.
A mon avis, là, il faut avoir 1 groupe <g> par région, contenant un <path> qui décrit la région et des <path> qui décrivent sa frontière (un par frontière de la région avec une autre région). De cette façon, tu pourras gérer la couleur d'une région avec le 1er path, et la couleur de ses frontières (ainsi que leur affichage ou non) avec les autres paths.
Ensuite, 1 pays = 1 groupe <g> de régions. Si une région change de pays, elle n'aura qu'à changer de groupe dans le code SVG (le SVG, c'est juste un autre langage à balises, donc cela peut se générer comme tu génères ton HTML). Il faudra aussi masquer les frontières intérieurs (la frontière entre deux régions d'un même pays n'a pas lieu d'être affichée).
On doit pouvoir réussir à ne pas dupliquer le code des <path> de frontière et celui du <path> de la région, mais je ne sais pas si ce sera super-pratique... L'idée est alors d'avoir les <path> de frontière d'un coté, et de créer un <polygon> (ou un <path> en forme de polygon) qui bouchera le trou entre ces frontières (un fill des frontières te montrera le polygone à boucher).
Bref, j'ai de la route à faire là, donc j'ai pas le temps de plus détailler, mais @lucard saura surement le faire
Au final, t'auras encore un SVG quasi-statique, et un CSS appliqué dessus dynamique: il masquera les frontières entres les régions d'un même pays. La seule composant dynamique du SVG consiste à mettre chaque région dans le groupe <g> du pays auquel elle appartient.
A mon avis, là, il faut avoir 1 groupe <g> par région, contenant un <path> qui décrit la région et des <path> qui décrivent sa frontière (un par frontière de la région avec une autre région). De cette façon, tu pourras gérer la couleur d'une région avec le 1er path, et la couleur de ses frontières (ainsi que leur affichage ou non) avec les autres paths.
Ensuite, 1 pays = 1 groupe <g> de régions. Si une région change de pays, elle n'aura qu'à changer de groupe dans le code SVG (le SVG, c'est juste un autre langage à balises, donc cela peut se générer comme tu génères ton HTML). Il faudra aussi masquer les frontières intérieurs (la frontière entre deux régions d'un même pays n'a pas lieu d'être affichée).
On doit pouvoir réussir à ne pas dupliquer le code des <path> de frontière et celui du <path> de la région, mais je ne sais pas si ce sera super-pratique... L'idée est alors d'avoir les <path> de frontière d'un coté, et de créer un <polygon> (ou un <path> en forme de polygon) qui bouchera le trou entre ces frontières (un fill des frontières te montrera le polygone à boucher).
Bref, j'ai de la route à faire là, donc j'ai pas le temps de plus détailler, mais @lucard saura surement le faire
Au final, t'auras encore un SVG quasi-statique, et un CSS appliqué dessus dynamique: il masquera les frontières entres les régions d'un même pays. La seule composant dynamique du SVG consiste à mettre chaque région dans le groupe <g> du pays auquel elle appartient.