Mootools et SVG

**mickael44** · 15/06/2012, 11h41

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

**vermine** · 15/06/2012, 11h50

Bonjour,

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

**mickael44** · 15/06/2012, 12h07

Bonjour vermine,

Voici la portion de code incriminée :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

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 !

**mickael44** · 15/06/2012, 12h22

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

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 ?

**vermine** · 15/06/2012, 13h27

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.

**mickael44** · 15/06/2012, 13h30

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.

Mootools et SVG

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager