Site iPad & SVG

[pierred69]

Bonjour,

je suis actuellement en train de développer une version "iPad" du site web de l'entreprise où je travaille, et ce site web contient un certain nombre de diagrammes dynamiques et interactifs dont je suis chargé de créer des versions compatibles. Après de longues recherches j'ai opté pour la technologie SVG couplé à Javascript. Au début tout fonctionnait mais à un état d'avancement, j'ai ajouté l'interaction et là catastrophe : je n'ai rien d'autre que l'axe des abscisses. J'ai bien entendu voulu revenir en arrière avec un revert, mais rien n'y fait. Le plus surprenant c'est que sur FireFox (en me faisant passer pour un iPad via le user agent) ça fonctionne très bien. Mais Safari doit être plus exigeant en rigueur de code. Cependant :

* La console javascript ne retourne aucune erreur
* Le code SVG généré est identique sur le PC et sur la tablette

L'erreur doit a priori venir du svg ou de la div (en sachant par ailleurs que la

Voici le code SVG retourné après l'exécution du javascript !!

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
27
28
29
30
31
<div style="margin-top: 15px;" class="overview">	
<div id="perf">
<svg height="467" width="700" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect opacity="0.7" style="opacity: 0.4;" stroke="#000" fill="#565656" ry="0" rx="0" r="0" height="0.5" width="600" y="466" x="46"/>
<rect opacity="0.7" style="opacity: 0.4;" stroke="#000" fill="#565656" ry="0" rx="0" r="0" height="0.5" width="600" y="419" x="46"/>
<rect opacity="0.7" style="opacity: 0.4;" stroke="#000" fill="#565656" ry="0" rx="0" r="0" height="0.5" width="600" y="372" x="46"/>
<rect opacity="0.7" style="opacity: 0.4;" stroke="#000" fill="#565656" ry="0" rx="0" r="0" height="0.5" width="600" y="325" x="46"/>
<rect opacity="0.7" style="opacity: 0.4;" stroke="#000" fill="#565656" ry="0" rx="0" r="0" height="0.5" width="600" y="279" x="46"/>
<rect opacity="0.7" style="opacity: 0.4;" stroke="#000" fill="#565656" ry="0" rx="0" r="0" height="0.5" width="600" y="232" x="46"/>
<rect opacity="0.7" style="opacity: 0.4;" stroke="#000" fill="#565656" ry="0" rx="0" r="0" height="0.5" width="600" y="185" x="46"/>
<rect opacity="0.7" style="opacity: 0.4;" stroke="#000" fill="#565656" ry="0" rx="0" r="0" height="0.5" width="600" y="139" x="46"/>
<rect opacity="0.7" style="opacity: 0.4;" stroke="#000" fill="#565656" ry="0" rx="0" r="0" height="0.5" width="600" y="92" x="46"/>
<rect opacity="0.7" style="opacity: 0.4;" stroke="#000" fill="#565656" ry="0" rx="0" r="0" height="0.5" width="600" y="45" x="46"/>
<rect opacity="0.7" style="opacity: 0.4;" stroke="#000" fill="#565656" ry="0" rx="0" r="0" height="0.5" width="600" y="0" x="46"/>
<text fill="#000000" stroke="none" style="text-anchor: end; font:10px 'Arial';" text-anchor="end" y="466" x="42"><tspan>0</tspan></text>
<text fill="#000000" stroke="none" style="text-anchor: end; font:10px 'Arial';" text-anchor="end" y="419.3" x="42"><tspan>10</tspan></text>
<text fill="#000000" stroke="none" style="text-anchor: end; font:10px 'Arial';" text-anchor="end" y="372.6" x="42"><tspan>20</tspan></text>
<text fill="#000000" stroke="none" style="text-anchor: end; font:10px 'Arial';" text-anchor="end" y="325.90000000000003" x="42"><tspan>30</tspan></text>
<text fill="#000000" stroke="none" style="text-anchor: end; font:10px 'Arial';" text-anchor="end" y="279.20000000000005" x="42"><tspan>40</tspan></text>
<text fill="#000000" stroke="none" style="text-anchor: end; font:10px 'Arial';" text-anchor="end" y="232.50000000000006" x="42"><tspan>50</tspan></text><text fill="#000000" stroke="none" style="text-anchor: end; font:10px 'Arial';" text-anchor="end" y="185.80000000000007" x="42"><tspan>60</tspan></text>
<text fill="#000000" stroke="none" style="text-anchor: end; font:10px 'Arial';" text-anchor="end" y="139.10000000000008" x="42"><tspan>70</tspan></text>
<text fill="#000000" stroke="none" style="text-anchor: end; font:10px 'Arial';" text-anchor="end" y="92.40000000000008" x="42"><tspan>80</tspan></text>
<text fill="#000000" stroke="none" style="text-anchor: end; font:10px 'Arial';" text-anchor="end" y="45.700000000000074" x="42"><tspan>90</tspan></text>
<text fill="#000000" stroke="none" style="text-anchor: end; font:10px 'Arial';" text-anchor="end" y="-0.999999999999929" x="42"><tspan>100</tspan></text>
<rect opacity="0.7" style="opacity: 0.7;" stroke="#000" fill="#565656" ry="0" rx="0" r="0" height="1" width="600" y="466" x="50"/>
<rect opacity="0.7" style="opacity: 0.7;" stroke="#000" fill="#565656" ry="0" rx="0" r="0" height="467" width="1" y="0" x="50"/>
<path fill-opacity="0.8" d="M62,466L162,466L162,293L62,293Z" stroke="none" fill="#04999d" id="perf_bar_0"/>
<path fill-opacity="0.8" d="M182,466L282,466L282,279L182,279Z" stroke="none" fill="#d10031" id="perf_bar_1"/><path fill-opacity="0.8" d="M302,466L402,466L402,335L302,335Z" stroke="none" fill="#970194" id="perf_bar_2"/>
<path fill-opacity="0.8" d="M422,466L522,466L522,232L422,232Z" stroke="none" fill="#666666" id="perf_bar_3"/>
<path fill-opacity="0.8" d="M542,466L642,466L642,265L542,265Z" stroke="none" fill="#649903" id="perf_bar_4"/>
</svg></div>

Et ensuite l'axe des abscisses, qui lui se trouve dans une <div> différente car j'utilise le plugin JAVASCRIPT GRaphael pour effectuer la rotation sur le texte.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
	<div style="margin-left: 50px; width:700px;">
<div id="perf_rank_0" style="float:left; width:120px; height:70px;">
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120" height="150" style="margin-top:-10px;">
<text x="20" y="80" text-anchor="end" style="text-anchor: end; font: 10px "Arial";" font="10px "Arial"" stroke="none" fill="#000000" transform="rotate(296, 10, 10)"><tspan>memory</tspan></text>
</svg></div>
 
<div id="perf_rank_1" style="float:left; width:120px; height:70px;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120" height="150" style="margin-top:-10px;"><desc>Created with Raphaël</desc><defs/><text x="20" y="80" text-anchor="end" style="text-anchor: end; font: 10px "Arial";" font="10px "Arial"" stroke="none" fill="#000000" transform="rotate(296, 10, 10)"><tspan>attention</tspan></text>
</svg>
</div>
 
<div id="perf_rank_2" style="float:left; width:120px; height:70px;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120" height="150" style="margin-top:-10px;"><desc>Created with Raphaël</desc><defs/><text x="20" y="80" text-anchor="end" style="text-anchor: end; font: 10px "Arial";" font="10px "Arial"" stroke="none" fill="#000000" transform="rotate(296, 10, 10)"><tspan>language</tspan></text></svg></div><div id="perf_rank_3" style="float:left; width:120px; height:70px;"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120" height="150" style="margin-top:-10px;"><desc>Created with Raphaël</desc><defs/><text x="20" y="80" text-anchor="end" style="text-anchor: end; font: 10px "Arial";" font="10px "Arial"" stroke="none" fill="#000000" transform="rotate(296, 10, 10)"><tspan>executive-functions</tspan></text></svg></div><div id="perf_rank_4" style="float:left; width:120px; height:70px;"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120" height="150" style="margin-top:-10px;"><desc>Created with Raphaël</desc><defs/><text x="20" y="80" text-anchor="end" style="text-anchor: end; font: 10px "Arial";" font="10px "Arial"" stroke="none" fill="#000000" transform="rotate(296, 10, 10)"><tspan>visual-spatial</tspan></text></svg></div></div></div>

Si quelqu'un a une idée de ce qui pourrait se passer. J'ai vérifié mes <div> et mes balises, et toutes sont correctement fermées. Seule l'axe fonctionne, en précisant qu'elle est construite après la grid et avant les barres. J'avais d'ailleurs voulu utiliser le plugin Graphael en JS mais il est franchement nul, on maîtrise pas tout, et surtout, il y a pas de grid, pourtant élémentaire à la compréhension d'un diagramme de ce type !!

Précision : le javascript est envoyé par l'intermédiaire d'Ajax une fois les données sur le webservice récupérés et traités. Je reprends un principe mis déjà en oeuvre...

Merci à tous ceux qui pourront m'aider dans les délais les plus prompts !!

PS : J'ai donné surtout le SVG renvoyé car je pense pas que le problème vienne de Javascript sinon la console, y compris celle de l'iPad, s'exciterait, et je n'aurais pas la suite du script fonctionnel... Et surtout, il est très long, puisque j'ai créé un objet prototype pour gérer la création du diagramme...

Merci à vous !

[danielhagnoul]

Bonsoir

La seule chose que je remarque c'est un souci avec les divisions d'ID "perf_rank_X". Le style CSS leur assigne un height de 70px alors que le SVG travaille sur un height de 150.

Suivant les navigateurs cela provoque des effets disgracieux qui disparaissent dès que je donne une hauteur de 150px aux divisions.

[Edit 2011-06-16T10:10:00]

À mon avis, toutes ces divisions HTML qui enrobent le code SVG sont inutiles.

Un outil comme Inkscape (http://inkscape.org/?lang=fr) permet de concevoir le graphique entièrement en SVG.

Où alors jQuery et un plugin graphique (Flot http://code.google.com/p/flot/ ou Visualize http://www.filamentgroup.com/lab/upd...esigning_with/).

Mais pour l'iPad je pense qu'il vaudrait mieux utiliser Inkscape.