Mootools et SVG

Version imprimable

15/06/2012, 12h41
mickael44

Mootools et SVG

Bonjour à tous,

Je travaille actuellement sur un graphique en SVG et, bien que j'arrive à trouver un élément circle au sein de mon graphique (avec un each) qui est incorporé au sein de ma page HTML, je n'arrive pas à interagir avec lui via mootools. Par exemple, un get('title') ne fonctionne pas.

A terme, je souhaiterai implémenter un tooltip sur ma courbe SVG.

Fais-je quelque chose de mal ?

Merci d'avance pour vos réponses.

Mickaël
15/06/2012, 12h50
vermine

Bonjour,

Pourrions-nous voir la portion de code impliquée ? :-o

Bonjour vermine,

Voici la portion de code incriminée :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="fr">
<head>
<title>Title</title>
<script type="text/javascript" src="http://demos111.mootools.net/demos/mootools.svn.js"></script>
</head>
<body>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="550" height="400" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">  <title>Taux du Livret A</title>
  <defs>
  </defs>
  <script type="text/javascript">
	window.addEvent('domready', function(){
		$$('.tooltip').each(function(t){
			alert(t.title); // Affiche "undefined"
			t.set("fill", "blue"); // Ne fonctionne pas
			alert(t.get('title')); // Ne fonctionne pas
		});
	}); 
</script>
  <g id="courbe2">
    <circle cx="52.07" cy="130.3" r="3" fill="red" title="15/01/2003 : 1.820" class="tooltip"/>
  </g>
</svg>
</body>
</html>

Cela génère dans ma console l'exception suivante :

Citation:

Erreur*: uncaught exception: [Exception... "String contains an invalid character" code: "5" nsresult: "0x80530005 (NS_ERROR_DOM_INVALID_CHARACTER_ERR)" location: "http://demos111.mootools.net/demos/mootools.svn.js Line: 2415"]

Merci d'avance pour toute aide que tu pourra apporter !

15/06/2012, 13h22
mickael44

Ok, j'avance sur le soucis : j'ai mis déjà un mootools à jour et miracle, ca fonctionne ... sur chrome :D

Sur Fx : il me dit que mon element.set n'est pas une fonction

Ce qui ressemble à ce soucis : https://github.com/mootools/mootools-core/issues/2331

Je ne comprend pas trop le workaround proposé. Des explications ?
15/06/2012, 14h27
vermine

Bon, ils ont l'air de dire que c'est réglé avec la version FF13.

Le patch proposé en attendant détermine si les composants svg sont reconnus comme des objets de type Element. Dans le cas contraire, il les lie comme étant des méthodes et des propriétés de la classe Object.
15/06/2012, 14h30
mickael44

Je confirme, c'est bien résolu avec Fx 13. Merci à toi pour tes indication. Je vous dis dans l'aprem si les tooltips sur le graphique fonctionnent.