Bonjours a tous,

Je travail avec Raphaeljs (raphael). Je cree des formes et attache des evenements a celles ci. Mon probleme est le suivant: pour des raisons d'ergonomie je souhaiterai que le pointeur de la souris soit modifie lorsque le client survole la forme.
Jusque la pas de probleme l'excellent blog de Jenkov (jenkov) donne la solution au probleme. Il existe un espace de nom xlink
Code : Sélectionner tout - Visualiser dans une fenêtre à part
xmlns:xlink="http://www.w3.org/1999/xlink"
qui pour les navigateur recent peut permettre d'interpreter correctement un lien dans du SVG.

Voici le prototype propose:

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
 
<!DOCTYPE html><html><head><meta charset="UTF-8"></head><body>
 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <a xlink:href="/svg/index.html" target="_top">
        <rect x="10" y="20" width="75" height="30" style="stroke: #333366; fill: #6666cc"/>
    </a>
</svg>
 
</body></html>
Et voici un fiddle pour les curieux du resultat : petit rectangle

Le probleme se corse lorsque j'essaie programmatiquement d'obtenir le meme resultat. Voici le code que j'utilise:

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
27
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
</head>
<body>
<div id="my-canvas"></div>
</body>
<script type="text/javascript">
var jq = jQuery.noConflict();
 
var paper = Raphael('my-canvas', 500, 300);      
jq('svg').attr('xmlns:xlink', 'http://www.w3.org/1999/xlink');
 
var rec = paper.rect(10, 20, 75, 30);
rec.attr('fill', '#6666cc');
rec.attr('stroke', '#333366');
 
var l = jq('<a xlink:href="#"></a>');      
jq(rec.node).wrap(l);
 
</script>
</html>
Voici egalement un fiddle : petit rectangle 2

ce code s'execute correctement jusqu'a la ligne :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
var l = jq('<a xlink:href="#"></a>');
... mais fait disparaitre la forme apres le "wrap".

Le plus etrange est que firefox (iceweasel dans mon cas) montre que la structure du SVG est correcte (du moins me semble-t-il).

Nom : mail-raphael.png Affichages : 446 Taille : 33,2 Ko

  1. Est ce que le mecanisme est prevu dans Rapahel (englober un forme dans un lien ) mais ne l'ai je pas vu dans la documentation ?
  2. Peut-on utiliser jquery pour ce genre de manipulation sans en laisser la responsabilite a Rapahel ?
  3. Pourquoi la frome disparais ?
  4. Y a-t-il un autre solution pour mettre un forme dans un lien (avec Raphael ou une autre librairie SNAP SVG du meme auteur ne semble pas mieux dottee par example) ?


Merci a tous