[RAPHAEL] - Mettre un lien xlink autour d'une forme SVG

**samouille666** · 03/03/2015, 08h28

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 : 395
Taille : 33,2 Ko

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

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 ?
Peut-on utiliser jquery pour ce genre de manipulation sans en laisser la responsabilite a Rapahel ?
Pourquoi la frome disparais ?
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

**chrisdot** · 04/03/2015, 10h45

Hello,

J'ai également eu quelques surprises lorsque j'ai tenté de manipuler du SVG comme du HTML avec JQuery. Dans mon cas je tentais d'utiliser les méthode d'ajout/suppression de class de jquery sans effet.
La raison c'est le fait que le DOM SVG est spécifique et ne peut être modifié par jquery.
Donc, ne t'acharnes pas avec "juste" jquery, ça ne marchera pas tel quel. Par contre il existe des librairies spécifiques (mais je n'ai pas testé).

Sinon, je sais pas trop ce que tu essaies de faire mais il y a moyen de s'en sortir avec raphael.js... Si c'est juste pour changer la tête du curseur, il y a moyen de faire.

**samouille666** · 05/03/2015, 10h59

Hello,

Merci pour ta reponse cela a suffit pour re-orienter les recherches

.

Raphael n'integre pas de maniere 'naturelle' la spec xllink c'est peut etre la difficulte par contre le probleme se decompose effectivement en deux parties:

veut on faire de la forme un lien (xlink) ?
veut on changer l'aspect du curseur ?

En ce qui concerne le premier questionnement je n'ai pas trouver comment le faire avec Raphael mais c'est tout a fait possible avec jQuery SVG et encore plus simple et bien integre avec svg.js => hyperliens.

En ce qui concerne l'aspect du curseur il est en fait prevu dans la spec SVG. Pour des precision sur le styling ici et pour des detail sur l'aspect du curseur la.
C'est le poste sur le changement de l'aspect du curseur a partir de l'evenement mouseover est m'a mis sur la piste

...mais la solution du styling est plus elegante et dans la ligne de la spec me semble-t-il.
Avec Raphael il suffit d'ajouter apres creation du cercle, rectangle ou tout autre forme:

Code :

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