[SVG] Carte SVG intéractive

[Kael_004]

Bonjour!
Je suis actuellement en période de stage; La mission que l'on m'a confié pour l'instant est de maîtriser suffisamment bien le SVG pour faire des cartes intéractives lisibles aussi bien sous Internet Explozer, Firefox, ou Opéra.
Mais je me heurte à certains problèmes.
Voici le "rapport d'erreur" que j'ai fait parvenir à mon chef; Si vous avez une idée lumineuse, n'hésitez pas à me mailer pour m'éclairer!

Objectif #1:
Afficher une carte intéractive de la France:
_Découpage par régions
_Changement de couleur de la région lorsque le pointeur est dessus (+éventuellement affichage sur la région de pourcentages issus de calculs statisqtiques faits sur une base de données).

Problèmes rencontrés:
.La carte de la France au format SVG vient du logiciel Inscape:
_Comment mettre des évènements pointeurs sur une telle carte?
.Problèmes de navigateurs:
_Sur mon PC au travail (relié partiellement à internet):
>Firefox 1.5 (avec plugin Adobe SVG Viewer 3.03 installé)
n'affiche pas le SVG.*
>Internet Explorer 6.0 (avec le même plugin)
affiche le SVG sans problèmes.
_Sur mon PC portable personnel (non-relié à internet):
>Firefox 1.5 (avec plugin Adobe SVG Viewer 3.03 installé)
n'affiche pas le SVG.*
>Internet Explorer 6.0 (avec le même plugin)
n'affiche pas le SVG;
Une barre d'information en haut de la page indique que "I.E. a restreint l'affichage du contenu actif de ce fichier, qui pourrait accéder à votre ordinateur". En faisant "Autoriser le contenu bloqué..." et en acceptant son execution, je n'obtient rien de plus qu'une petite icone en haut à gauche, représentant une palette de peintre, dont il est impossible de tirer quoique ce soit, mis à part en déduire qu'une "image" devait sans doute être affichée ici.

*:Exemple d'erreur affichée par Firefox=
Erreur d'analyse XML: préfixe non limité à un espace de noms
Emplacement: file://C:/Documents%20and%20settings/.../Diagram08.svg
Numéro de ligne 14, Colonne 15:
<use xlink:href="#triangle" transform="rotate(0,5500,3000)"/>
----^
Sachant que j'ai déjà vu cet exemple (Diagram08.svg *²) fonctionner parfaitement sous Firefox 1.0 et sous I.E. 6.0.

*²:Il s'agit d'un exemple basique d'animation où on fait varier la taille et l'emplacement d'un texte et où, dans le même temps, on fait effectuer une rotation à plusieurs 'clones' d'un même triangle, formant ainsi une jolie rosace mouvante.

Merci d'avance à tous ceux / celles qui me répondront!

[jeff2034]

Salut,
A ce que je sache aux dernières nouvelles firefox gère le svg en natif et c'est loin d'être au point (bien que ça s'améliore d'heure en heure).
Donc bon les animations & cie ça marche très moyennement ^^ ça m'étonne que tu es vu le fichier svg tourné sur firefox 1.0
@++

[Sephy]

Salut,

Je voulais savoir si tu avais réussi à implanter le changement de couleur lorsqu'on survole une région. En effet je dois réaliser la même chose mais pour les départements. Mais je ne connais pas grand chose au SVG. J'ai fait un peu de XML, mais le dessin vectoriel ne me dit rien.
Par ou commencer ? As tu trouvés des cours assez débutants sur le net ?



PS: moi je n'ai pas de problème de navigateur, je ne dois travailler que sous IE...

[Kael_004]

Voilà les meilleurs tuto que j'ai trouvé:
_http://tecfa.unige.ch/guides/tie/html/svg-intro/svg-intro.html
_http://tecfa.unige.ch/guides/tie/html/svg-dyn/svg-dyn.html
_http://pilat.free.fr/
Et pour s'entourer de pros:
_http://svgfr.org/

Sinon, oui, j'ai réussi à avoir une carte où les régions s'affichent en surbrillance et leur nom apparaît lorsqu'on passe le pointeur dessus.
Par contre je n'ai pas fait de découpage par départements.
Si tu as ce découpage, je peux te filer la méthode pour créer les évènements pointeurs.
Le site http://pilat.free.fr/ m'a beaucoup aidé pour ça, dans la section "cartographie".

[grefer2luxe]

Bonjour,
Enfet je voulais savoir c'est quoi le code qui puissent faire que quand on survol sur une région de la carte,la région en question se mette en couleur et dés que l'on quitte cette meme région, elle redevienne normale.
Mon code pour l'instant est le suivant:
<area shape="poly" coords="116,209,139,226,144,271,161,272,184,257,172,201,143,194" href="...\Treflez">
Dc enfet je vous explique, area shape c'est pr la forme de la région(rond,caré,...), le coords cest pr sa longeur et le href cest pr le lien que je veux associer à cette région
et dc je voudrais rajouter la mise en couleur de la zone quand on vient sur la zone,cependant je ne sais pas comment faire!!
Si quelqu'un pouvait m'aider cela serait trés gentil et simpa!!
Merci d'avance

PS:J'ai été voir les site que akrl a donnés cependant je n'ai pas trés bien compris voir rien du tout..dc voila et je dois faire cela pour mon stage dc c'est plutot urgent!!Merci d'avance

[petitsims]

en fait il faut que tu gères cela avec les évènements onmouseover et onmouseout et la propriété "fill" pour le remplissage ou "stroke" pour la bordure.

tu peux voir un exemple d'utilisation là : http://www.s-porta.fr/lecv.html

donc en gros :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
<area shape="poly" coords="116,209,139,226,144,271,161,272,184,257,172,201,143,194" href="...\Treflez" onmouseover="javascript:jesuisdessus(evt)" onmouseout="javascript:jesuisparti(evt)">

function jesuisdessus(p_evt)
{
    l_obj = p_evt.getTarget(); // je récupère l'objet qui a généré l'event
    l_obj.setAttribute('fill','#FFF') // Je rempls mon bojet de noir
}

function onmouseout(p_evt)
{
    // à toi de jouer
}

J'espère avoir répondu à tes besoins.
Séb.