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 xlinkqui pour les navigateur recent peut permettre d'interpreter correctement un lien dans du SVG.
Code : Sélectionner tout - Visualiser dans une fenêtre à part xmlns:xlink="http://www.w3.org/1999/xlink"
Voici le prototype propose:
Et voici un fiddle pour les curieux du resultat : petit rectangle
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>
Le probleme se corse lorsque j'essaie programmatiquement d'obtenir le meme resultat. Voici le code que j'utilise:
Voici egalement un fiddle : petit rectangle 2
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>
ce code s'execute correctement jusqu'a la ligne :... mais fait disparaitre la forme apres le "wrap".
Code : Sélectionner tout - Visualiser dans une fenêtre à part var l = jq('<a xlink:href="#"></a>');
Le plus etrange est que firefox (iceweasel dans mon cas) montre que la structure du SVG est correcte (du moins me semble-t-il).
- 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
Partager