[SVG] Image mapping ultra-répétitif

[Maz]

Bonjour, toujours sur mon système de carte SVG, je rencontres un problème au niveau de mes tuiles (hexagonales) et des évènements (click, mouseover, mouseout) affichant une tooltip qui affiches lorsque l'on clic sur les bords des tuiles, les infos de la tuiles d'à côté. On est d'accord, il faut utiliser de l'image mapping pour résoudre le problème. Le problème est qu'après recherches, je ne trouves que de l'image mapping avec un seul élément "map" contenant plusieurs éléments "area" pour une seule image(un exemple ici).

Or ceci ne correspond pas vraiment à ma situation puisque je ne me bases pas sur une seule image, mais plusieurs dizaines collées bout-a-bout. Un exemple de code SVG généré actuellement:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg externalResourcesRequired="true" width="500" height="500" version="1.1" 

xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="init(evt)">

<defs>

	<title>Map</title>

	<image id="grass" width="38.64" height="29.32" xlink:href="/assets/grass.svg" />

	<image id="water" width="38.64" height="29.32" xlink:href="/assets/water.svg" />

	<image id="darkgrass" width="38.64" height="29.32" xlink:href="/assets/darkgrass.svg" />

</defs>

<g id="map">

	<g class="tuile" id="x:0y:0">

		<use xlink:href="#darkgrass" x="253.91472899999832" y="4.668907277118108" />

		<text fill="white" visibility="hidden" dx="5" dy="17" class="multi-line">

			<tspan>0,0:</tspan>

			<tspan dy="1em">Non découvert</tspan>

		</text>

	</g>

	<g class="tuile" id="x:0y:1">

		<use xlink:href="#darkgrass" x="229.41983157216654" y="16.916355991034" />

		<text fill="white" visibility="hidden" dx="5" dy="17" class="multi-line">

			<tspan>0,1:</tspan>

			<tspan dy="1em">Non découvert</tspan>

		</text>

	</g>

	<g class="tuile" id="x:0y:2">

		<use xlink:href="#darkgrass" x="204.92493414433477" y="29.16380470494989" />

		<text fill="white" visibility="hidden" dx="5" dy="17" class="multi-line">

			<tspan>0,2:</tspan>

			<tspan dy="1em">Non découvert</tspan>

		</text>

	</g>

</g>

J'ai déjà établis la "zone d'action" de chaque tuile hexagonale:

<map name="basic_tile" id="basic_tile">

	<area shape="poly" points="5,3 24,0 39,7 33,17 14,19 0,12 5,3" />

</map>

Mais je ne vois pas comment la mettre en place et ne sais même pas s'il cela est réalisable sachant que je n'utiliserais aucun attributs href (l'affichage de la tooltip est basé sur l'évènement onClick de chaque balise "use").

[niahoo]

ça sert à quoi ? pourquoi tu ne mets pas des éléments onclick sur tes tuiles hexagonales dans le SVG ?

[Maz]

Mes tuiles sont "chargés": j'ai 4/5images de tuiles, et une seule carte qui charges ces 4/5images et qui boucles. à moins que l'on puisses récupérer un évènement exercer sur la tuile depuis la map final, je sais pas si c'est possible?

[niahoo]

ça marche de mettre un onclick avec jquery sur image#darkgrass par exemple ?

[Maz]

ça marche (j'ai juste essayer avec un alert), mais que ce soit sur l'use ou l'image, le problème est le même sur le bords des tuiles. Soit j'arrives à faire un javascript interne à mes images SVG darkgrass, grass et water, incluant un évènement onClick sur le polygon que je peut récupérer depuis la map finale... Soit je sais pas. J'essai ça de suite après manger.

[niahoo]

tu veux pas le mettre en ligne, pasque à mon avis on se comprend pas. il te faut modéliser tes polygones avec des path et les rendre clicables. tu peux leur donner la forme que tu veux.

généralement tu as une couche transparent de controle.

[Maz]

tu veux pas le mettre en ligne, pasque à mon avis on se comprend pas. il te faut modéliser tes polygones avec des path et les rendre clicables. tu peux leur donner la forme que tu veux.

généralement tu as une couche transparent de controle.

Si ça peut aider...

http://emazine.fr/projets/tooltiponmap/map.svg

Les tuiles sont là:
http://emazine.fr/projets/tooltiponmap/grass.svg
http://emazine.fr/projets/tooltiponmap/darkgrass.svg
http://emazine.fr/projets/tooltiponmap/water.svg

[Myrina]

tu veux pas le mettre en ligne, pasque à mon avis on se comprend pas. il te faut modéliser tes polygones avec des path et les rendre clicables. tu peux leur donner la forme que tu veux.

généralement tu as une couche transparent de controle.

J'ai également pensé à la solution du path. Mais j'ai eu un souci quand j'avais décidé de ne pas les remplir (fill=none): seul le contour (stroke) était réactif!
A voir si un opacité à 0% fonctionne et n'altère pas le rendu...

[niahoo]

Oui ta couche de controle doit avoir du fill pour réagir, l'opacité à 0 fonctionne très bien.

La tu n'as pas le choix, si tu veux que la zone clicable soit un hexagone il te faut mettre un path pour le dessiner. Enfin disons que c'est le plus simple.

[Maz]

Ok, j'ai compris la technique, je l'ai mise en place, mais je la trouves pas parfaites... je met en ligne. opé d'ici 2min.

Edit: opé, si vous zoommer (pour mieux voir, attention bug du zoom sur firefox 3). vous pouvez voir que si vous cliquer sur le coin le plus à droite et celui le plus en bas de chaque tuile, rien ne s'affiches. J'ai laisser l'opacity à 1 pour que vous voyez bien mes paths.

Edit²: Si vous cliquez sur le coin droit de la case tout à droite, ça fonctionnes, pareil pour le coin bas de la case tout en bas... Tout ça n'est qu'une histoire de chevauchement je supposes, grrrr...