Pour la seconde partie; je pense que tu ne coupe pas à la notion d'affichage en couche. C'est toujours ce qui est défini en dernier qui s'affiche au dessus des autres pour un même pixel.
Sinon, j'ai vite porté en PHP la génération afin que tu vois une possibilité pour gérer les couches:
C'est pas joli, mélange de HTML et PHP, mais c'est juste pour illustrer.
J'ai diminué la taille de l'île car ça me faisait beaucoup de paires à écrire pour illustrer : http://myrina.free-h.net/testSVG.php
Sinon, j'ai vite porté en PHP la génération afin que tu vois une possibilité pour gérer les couches:
<!DOCTYPE html>
<html>
<head>
<title>SVG Experiment</title>
</head>
<body>
<svg xmlns="http://www.w3.org/1999/xhtml"
xmlns
vg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" width="1000px" height="600px">
<defs id="hexagons">
<path id="base" d=" m 0 30 l 26 15 l 26 -15 l 0 -30 l -26 -15 l -26 15 z"/>
<g id="bordure">
<path id="base" d=" m 0 30 l 26 15 l 26 -15 l 0 -30 l -26 -15 l -26 15 z" fill-opacity="0.0" stroke="#DEB887" stroke-width="6px"/>
<circle cx="0" cy="30" r="10" fill="#DEB887"/>
<circle cx="26" cy="45" r="10" fill="#DEB887"/>
<circle cx="52" cy="30" r="10" fill="#DEB887"/>
<circle cx="52" cy="0" r="10" fill="#DEB887"/>
<circle cx="26" cy="-15" r="10" fill="#DEB887"/>
<circle cx="0" cy="0" r="10" fill="#DEB887"/>
</g>
<g id="chemin">
<path id="base" d=" m 0 30 l 26 15 l 26 -15 l 0 -30 l -26 -15 l -26 15 z" fill-opacity="0.0" stroke="#F4A460" stroke-width="2px"/>
<circle cx="0" cy="30" r="7" fill="#F4A460"/>
<circle cx="26" cy="45" r="7" fill="#F4A460"/>
<circle cx="52" cy="30" r="7" fill="#F4A460"/>
<circle cx="52" cy="0" r="7" fill="#F4A460"/>
<circle cx="26" cy="-15" r="7" fill="#F4A460"/>
<circle cx="0" cy="0" r="7" fill="#F4A460"/>
</g>
</defs>
<?php
$deltaX=52;
$deltaY=44;
//Liste des paires de coordonnées correspondant à une terre et devant posséder une bordure
$terres=array("2-7","2-8","2-9","2-10","2-11","2-12","2-13","2-14","2-15","3-6","3-7","3-8",
"3-9","3-10","3-11","3-12","3-13","3-14","3-15","4-6","4-7","4-8","4-9","4-10","4-11","4-12","4-13","4-14","4-15");
$bordures=array();
//Boucle pour afficher l'ensemble des hexagones
for ($Y=0;$Y<25;$Y++) {
$y=$Y*$deltaY;
for ($X=0;$X<25;$X++) {
$x=$X*$deltaX;
if (($Y%2)==1) {
//Pour le slignes impaires, il faut décaler les hexagones
$x-=($deltaX/2);
}
if (in_array("$Y-$X",$terres)) {
//C'est une terre, on sauvegarde les coordonnées pour retracer plus tard les bordures
$color="gold";
$bordures[]=array($X,$Y,$x,$y);
} else {
$color="lightblue";
}
echo '<use id="hexagon-'.$X.'-'.$Y.'" x="'.$x.'" y="'.$y.'" fill="'.$color.'" xlink:href="#base"/>\n';
}
}
//Boucle pour afficher une grande bordure sur toutes les terres
foreach ($bordures as $tile) {
list($X,$Y,$x,$y)=$tile;
echo '<use id="hexagon-bordure-'.$X.'-'.$Y.'" x="'.$x.'" y="'.$y.'" xlink:href="#bordure"/>\n';
}
//Boucle pour afficher la route sur les bordures
foreach ($bordures as $tile) {
list($X,$Y,$x,$y)=$tile;
echo '<use id="hexagon-chemin-'.$X.'-'.$Y.'" x="'.$x.'" y="'.$y.'" xlink:href="#chemin"/>\n';
}
?>
</svg>
</body>
</html>
C'est pas joli, mélange de HTML et PHP, mais c'est juste pour illustrer.
J'ai diminué la taille de l'île car ça me faisait beaucoup de paires à écrire pour illustrer : http://myrina.free-h.net/testSVG.php