Bonsoir !

J'ai quelques soucis avec la balise <object> et les évènements en Javascript.

Du côté HTML, j'ai ceci :

<object type="image/svg+xml" data="images/svg/europe.svg"></object>

Le fichier concerné est le suivant : carte Europe, légèrement modifié au niveau des couleurs.
Ce fichier associe un id à chaque pays. Pour la France, on a par exemple l'identifiant fr.

Je voudrais donc pouvoir faire ceci en Javascript (avec jQuery) :

$('#fr').click(function ()
{
    alert('Ok');
});

Mais le code XML du fichier SVG n'étant pas dans le corps du fichier HTML, Javascript ne connait pas cet id (le code fonctionne en plaçant le contenu du SVG directement dans le HTML, mais je trouve que ce n'est pas très propre, et peut-être pas en accord avec les standards).
J'aimerais donc savoir s'il existe une solution pour appliquer les évènement Javascript au contenu du fichier SVG ?

Merci de votre aide !

Tu peux peut-être, mais il faudrait inclure le SVG par un autre biais qu'un object...

La librairie Raphael semble l'inclure directement. Peut-être une piste à explorer ?

Je ne connaissais pas cette librairie. Je vais aller voir ce que je trouve à ce sujet et si ça permet de résoudre mon soucis.
Merci pour ta réponse

Salut,

tu peux jeter un coup d'œil à ce lien, t'as énormément d'infos (la dernière partie notamment sur SVG et DOM) : http://srufaculty.sru.edu/david.dailey [...] nimations.htm

Bon courage

Je suis enfin parvenu à quelque chose !

@Golmote : j'ai regardé du côté de Raphael, mais redéfinir tout le SVG en Javascript ne m'intéresse pas (ou alors j'ai raté une méthode :/).
@miclebowski : je n'avais pas vu ton message, mais je viens quand même d'aller y jeter un coup d'oeil.

Finalement, l'astuce réside dans le fait qu'il faut travailler sur le SVG au moment où il est chargé. C'est à dire :

document.getElementById('zone_euro').addEventListener('load', function ()
{
	var doc = $(this.contentDocument); // var doc = this.contentDocument;
	var fr = $('#fr', doc); // var fr  = doc.getElementById('fr');

	fr.hover(function ()
	{
		$(this).css('fill', '#F00');
	}, function ()
	{
		$(this).css('fill', '#2A7FFF');
	});
}, false);

zone_euro correspond à l'id de ma balise <object>. En commentaire j'ai mit le code pour ceux qui n'utilisent pas jQuery

Merci à vous deux pour votre aide ! Qui aurait penser qu'il soit si difficile d'appliquer du Javascript sur un objet SVG xD