SVG combiné avec du HTML

**gatlin** · 24/03/2009, 16h18

Bonjour tout le monde.
J'ai essayé un exemple qui met du code SVG dans un fichier HTML (ce qui m'intéresse beaucoup).
Le probléme c'est que mes navigateurs n'affichent pas le graphique incorporé dans le HTML.
Voici le code de l'exemple.

Merci d'avance

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
28
29
30
 
<?xml version="1.0"?>     
<html xmlns="http://www.w3.org/2000/svg">     
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
   <title>SVG Embedded into an XHTML File</title>
  </head>
  <body>
 
<h1>An SVG rectangle (via Name spaces)</h1>
 
<!-- Created with Inkscape (http://www.inkscape.org/) -->     
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
  <defs
     id="defs1343" />
  <g
     id="layer1">
    <rect
       width="90"
       height="90"
       x="30"
       y="30"
       style="fill:#0000ff;fill-opacity:0.75;stroke:#000000;
              stroke-width:1px"
       id="rect1353" />
  </g>
</svg>     
 
  </body>
</html>

**emmanuel.remy** · 24/03/2009, 21h34

Le souci c'est que ton navigateur doit interpréter le fichier comme du XML et non comme du HTML.

Donc la solution la plus simple c'est de changer l'extension .html pour mettre .xhtml (ou XML, cela fonctionnera encore dans Firefox)

Pour Firefox pas de problème.

Reste à voir pour IE qui lui je crois requiert des extension htm/html... Certainement que des règles de réécriture sur le server sont réalisables pour palier ce souci s'il se présente.

ERE

**Macmillenium** · 24/03/2009, 23h12

Bonsoir,

Envoyé par emmanuel.remy

Donc la solution la plus simple c'est de changer l'extension .html pour mettre .xhtml (ou XML, cela fonctionnera encore dans Firefox)

Pour Firefox pas de problème.

Reste à voir pour IE qui lui je crois requiert des extension htm/html... Certainement que des règles de réécriture sur le server sont réalisables pour palier ce souci s'il se présente.

En plus du type mime application/xhtml+xml envoyé par l'extension .xhtml, IE ne supporte pas les SVG.

**emmanuel.remy** · 24/03/2009, 23h58

En fait Internet Explorer supporte le SVG avec le plugin d'Adobe http://www.adobe.com/svg/viewer/install/ .

Et pour la configuration de Apache qui convient pour tous les navigateurs:

Code :

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

1
2
3
4
5
6
7
8
9
 
AddType text/html .xhtml
RewriteEngine on
RewriteBase /
RewriteCond %{HTTP_ACCEPT} application/xhtml\+xml
RewriteCond %{HTTP_ACCEPT} !application/xhtml\+xml\s*;\s*q=0
RewriteCond %{REQUEST_URI} \.xhtml$
RewriteCond %{THE_REQUEST} HTTP/1\.1
RewriteRule .* - [T=application/xhtml+xml]

ERE

**gatlin** · 25/03/2009, 11h26

Au fait j'ai déjà installé le plugin SVGView.
J'ai mis application/xhtml+xml et changé l'extension en mettant .xhtml mais
toujours rien sur IE d'ailleurs il ne l'ouvre même pas contrairement à Opera et Firefox qui m'affiche trés bien le graphique.

Et bizarrement j'avais vu un exemple (que j'ai essayé de retrouver mais sans succés) sur la toile qui marchait avec comme extension Html et IE l'executait sans probléme.

Merci d'avance

**Macmillenium** · 25/03/2009, 11h39

Envoyé par gatlin

J'ai mis application/xhtml+xml et changé l'extension en mettant .xhtml mais
toujours rien sur IE d'ailleurs il ne l'ouvre même pas contrairement à Opera et Firefox qui m'affiche trés bien le graphique.

Même en modifiant le contenu de l'en-tête ACCEPT, le type application/xhtml+xml posera des problèmes de parse sous IE.
Je te conseil de penser à d'autres solutions en passant par l'XSLT.

**gatlin** · 25/03/2009, 13h54

Je suis entrain de faire ce petit test car j'ai un projet qui consiste à paramétrer graphiquement les workflows avec svg dans une page jsp.
Je dois permettre des drag and drop tout en interpretant ce que l'utilisateur dessine pour alimenter mes tables qui sont en rapport avec le workflow (tables des etats,transition,traitements..)

Donc je me disais qu'en combinant le svg(avec javascript) et le jsp ça irait.

Merci

**Macmillenium** · 25/03/2009, 13h55

Envoyé par gatlin

Donc je me disais qu'en combinant le svg(avec javascript) et le jsp ça irait.

Oui, en effet

**emmanuel.remy** · 25/03/2009, 18h47

Salut,

Il s'avère que tu peux aussi inclure du SVG directement dans une page HTML à l'aide soit d'une balise OBJECT, EMBED ou d'un IFRAME (http://www.w3schools.com/svg/svg_inhtml.asp et http://www.carto.net/papers/svg/samples/svg_html.shtml). Du coup tu peux aussi mettre du javascript dans ta page HTML, qui va accéder aux objets SVG si tu le souhaites.

http://developpez-en-svg.homelinux.o...VGDocument.php

Mais d'ailleurs tu peux mettre du javascript directement dans ton code SVG et même inclure des fichier JS depuis le header de ton SVG. J'aime bien ce site, qui donne de bonnes idées: http://www.carto.net/papers/svg/samples/#iact

Bon dévelopement,

ERE

**gatlin** · 26/03/2009, 11h05

Salut.
Merci pour tes indications mais mon probléme c'est que je dois représenter aussi des informations qui sont dans la base de données et je me demande comment on peut donner ces infos au document SVG sans les JSP.

Merci d'avance

**gatlin** · 27/03/2009, 12h04

Bonjour tout le monde
J'ai reussi à incorporer mon code svg dans du jsp

Bonne nouvelle

:Opera et Firefox m'affiche le contenu sans probléme
Mauvaise nouvelle

:IE m'affiche rien du tout,il fait comme si de rien n'était et mon appli doit être déployée sur IE.Ca craint pour moi

:

J'aimerai bien que quelqu'un m'aide pour que ça marche sur IE

Le code est long et je m'en excuse

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
 
  <%@ page language="java" contentType="image/svg+xml; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Workflow</title>
</head>
<body>
 
	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" height="1000">
<defs>
 
     <filter id="monfiltre">
       <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="out1"/>
	   <feOffset in="out1" dx="4" dy="4" result="offsetBlur"/>
       <feSpecularLighting in="out1" specularExponent="20" surfaceScale="10" specularConstant=".75" lighting-color="#bbbbbb" result="out2">
         <fePointLight x="200" y="400" z="200"/>
       </feSpecularLighting>
	   <feComposite in="out2" in2="SourceAlpha" operator="in" result="specOut"/>
       <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
         k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
     </filter>
 
	 <feMerge>
		<feMergeNode in="offsetBlur"/>
		<feMergeNode in="litPaint"/>
     </feMerge>
 
 
     <filter id="monOmbre">
      <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
			<feOffset in="blur" dx="0" dy="0.1" result="offsetBlur"/>
			<feSpecularLighting in="blur" surfaceScale="10" specularConstant=".75" 
                          specularExponent="20" lighting-color="#bbbbbb"  
                          result="specOut">
				<fePointLight x="800" y="1000" z="200"/>
			</feSpecularLighting>
			<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
			<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" 
                   k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
			<feMerge>
				<feMergeNode in="offsetBlur"/>
				<feMergeNode in="litPaint"/>
			</feMerge>
     </filter>
 
 
	 <g id="arrowMarker"> 
               <g stroke="darkorange" stroke-width="0.4"> 
                    <line x1="4" y1="-1" x2="0" y2="0"/> 
                    <line x1="4" y1="+1" x2="0" y2="0"/> 
               </g> 
          </g> 
          <marker id="startMarker" markerWidth="48" markerHeight="24" viewBox="-4 -4 25 5" orient="auto" refX="0" refY="0" markerUnits="strokeWidth"> 
               <g> 
                    <use xlink:href="#arrowMarker" transform="rotate(180)" stroke-width="1" stroke="black"/> 
               </g> 
          </marker> 
 
		   <marker id="Triangle" viewBox="0 0 10 10" refX="10" refY="5"
			markerUnits="strokeWidth" markerWidth="4" markerHeight="4"
			orient="auto" stroke="#C12FFF" fill="#C12FFF">
			<path d="M0,0 L10,5 L0,10 z"/>
			</marker>
 
			<marker id="Retour" viewBox="0 0 10 10" refX="10" refY="5"
			markerUnits="strokeWidth" markerWidth="4" markerHeight="4"
			orient="auto" stroke="#237C92" fill="#237C92">
			<path d="M0,0 L10,5 L0,10 z"/>
			</marker>
 
			<linearGradient id = "gradient" x1 = "0%" y1 = "0%" x2 = "0%" y2 = "100%">
            <stop stop-color = "#78CA20" offset = "0%"/>
            <stop stop-color = "#BEF5B5" offset = "50%"/>
            <stop stop-color = "#FDFFFD" offset = "100%"/>
        </linearGradient>
 
		 <linearGradient id="MyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
			<stop stop-color = "#3C99B1" offset = "0%"/>
            <stop stop-color = "#98CFDC" offset = "50%"/>
            <stop stop-color = "#B9DEE7" offset = "100%"/>
      </linearGradient>
 
	  <linearGradient id="TRANS" x1="0%" y1="0%" x2="0%" y2="100%">
			 <stop offset="20%" stop-color="#F0BE20" />
			 <stop offset="80%" stop-color="#FBEAB5" />
      </linearGradient>
	  <linearGradient id="TRAITE" x1="0%" y1="0%" x2="0%" y2="100%">
			<stop stop-color = "#2D6D0C" offset = "0%"/>
            <stop stop-color = "#6E9B57" offset = "50%"/>
            <stop stop-color = "#C8D9BF" offset = "100%"/>
      </linearGradient>
   </defs>
 <!--rect x="0" y="0"  width="500" height="400" stroke="#0E0E0E" fill="#EEEEEE"/-->  
 
<g id="figures">
 
<!--BLOC ETATS/-->
<ellipse id="cercle" cx="-250" cy="-100" rx="30" ry="20" transform="matrix(1 0 0 1 300 200)" stroke-width="1" stroke="#3C99B1"  fill="url(#MyGradient)" filter="url(#monOmbre)"/>
<text x = "-4" y = "55" fill = "#104E8B" font-size = "18" font-family="Arial Black" transform="matrix(1 0 0 1 50 50)" > 1 </text>
<ellipse id="cercle" cx="80" cy="20" rx="30" ry="20" transform="matrix(1 0 0 1 300 200)" stroke-width="1" stroke="#3C99B1" fill="url(#MyGradient)" filter="url(#monOmbre)"/>
<text x = "325" y = "175" fill = "#104E8B" font-size = "18" font-family="Arial Black" transform="matrix(1 0 0 1 50 50)" > 2 </text>
<ellipse id="cercle" cx="420" cy="160" rx="30" ry="20" transform="matrix(1 0 0 1 300 200)" stroke-width="1" stroke="#3C99B1" fill="url(#MyGradient)" filter="url(#monOmbre)"/>
<text x = "665" y = "315" fill = "#104E8B" font-size = "18" font-family="Arial Black" transform="matrix(1 0 0 1 50 50)" > 3 </text>
 
 <!--BLOC TRAITEMENTS/-->  
<rect id="rectangle" x="120" y="20" rx="15" width="120" height="70" transform="matrix(1 0 0 1 50 50)" stroke-width="1" stroke="#2D6D0C" opacity="0.7" fill = "#DFDBDB" filter="url(#monOmbre)"/>
<rect id="rectangle1" x="130" y="25" rx="5" width="100" height="20" transform="matrix(1 0 0 1 50 50)" stroke-width="1" stroke="#2D6D0C"  opacity="0.5" fill="url(#TRAITE)" filter="url(#monOmbre)" />
<text x = "140" y = "38" fill = "#2D6D0C" font-size = "11" transform="matrix(1 0 0 1 50 50)" opacity="1"> Modifier </text>
<rect id="rectangle1" x="130" y="60" rx="5" width="100" height="20" transform="matrix(1 0 0 1 50 50)" stroke-width="1" stroke="#2D6D0C"  opacity="0.5" fill="url(#TRAITE)" filter="url(#monOmbre)" />
<text x = "140" y = "73" fill = "#2D6D0C" font-size = "11" transform="matrix(1 0 0 1 50 50)"  opacity="1"> Envoyer </text>
 
<rect id="rectangle" x="450" y="120" rx="15" width="120" height="100" transform="matrix(1 0 0 1 50 50)" stroke-width="1" stroke="#2D6D0C" opacity="0.5" fill = "#DFDBDB" filter="url(#monOmbre)"/>
<rect id="rectangle1" x="460" y="125" rx="5" width="100" height="20" transform="matrix(1 0 0 1 50 50)" stroke-width="1" stroke="#2D6D0C"  opacity="0.5" fill="url(#TRAITE)" filter="url(#monOmbre)" />
<text x = "470" y = "138" fill = "#2D6D0C" font-size = "11" transform="matrix(1 0 0 1 50 50)" opacity="1"> Ecrire </text>
<rect id="rectangle1" x="460" y="160" rx="5" width="100" height="20" transform="matrix(1 0 0 1 50 50)" stroke-width="1" stroke="#2D6D0C"  opacity="0.5" fill="url(#TRAITE)" filter="url(#monOmbre)" />
<text x = "470" y = "173" fill = "#2D6D0C" font-size = "11" transform="matrix(1 0 0 1 50 50)"  opacity="1"> Lire </text>
<rect id="rectangle1" x="460" y="195" rx="5" width="100" height="20" transform="matrix(1 0 0 1 50 50)" stroke-width="1" stroke="#2D6D0C"  opacity="0.5" fill="url(#TRAITE)" filter="url(#monOmbre)" />
<text x = "470" y = "208" fill = "#2D6D0C" font-size = "11" transform="matrix(1 0 0 1 50 50)"  opacity="1"> Effacer </text>
 
 <!--BLOC TRANSITIONS/-->
<!--ellipse id="cercle" cx="60" cy="-115" rx="10" ry="10" transform="matrix(1 0 0 1 300 200)" stroke-width="1" stroke="#40762C" fill="url(#TRANS)" filter="url(#monfiltre)"/-->
<ellipse id="cercle" cx="415" cy="-115" rx="10" ry="10" transform="matrix(1 0 0 1 300 200)" stroke-width="1" stroke="#104E8B" fill="url(#TRANS)"  filter="url(#monfiltre)" opacity="0.7"/>
<text x = "660" y = "40" fill = "#104E8B" font-size = "11" transform="matrix(1 0 0 1 50 50)" > A </text>
 
<ellipse id="cercle" cx="60" cy="-80" rx="10" ry="10" transform="matrix(1 0 0 1 300 200)" stroke-width="1" stroke="#104E8B" fill="url(#TRANS)"  filter="url(#monfiltre)" opacity="0.7"/>
<text x = "305" y = "75" fill = "#104E8B" font-size = "11" transform="matrix(1 0 0 1 50 50)" > C </text>
 
 <!--BLOC LISTE ETATS/-->
 
<rect id="rectangle" x="410" y="60" rx="5" width="150" height="20" transform="matrix(1 0 0 1 50 50)" stroke-width="1" stroke="#3C99B1" fill="#B9DEE7" opacity="0.7" filter="url(#monOmbre)"/>
<ellipse id="cercle" cx="190" cy="-80" rx="20" ry="10" transform="matrix(1 0 0 1 300 200)" stroke-width="1" stroke="#3C99B1" fill="url(#MyGradient)" filter="url(#monfiltre)" opacity="0.7"/>
<text x = "435" y = "75" fill = "#104E8B" font-size = "12" transform="matrix(1 0 0 1 50 50)" > 3 </text>
<ellipse id="cercle" cx="235" cy="-80" rx="20" ry="10" transform="matrix(1 0 0 1 300 200)" stroke-width="1" stroke="#3C99B1" fill="url(#MyGradient)" filter="url(#monfiltre)" opacity="0.7"/>
<text x = "480" y = "75" fill = "#104E8B" font-size = "12" transform="matrix(1 0 0 1 50 50)" > 8 </text>
<ellipse id="cercle" cx="280" cy="-80" rx="20" ry="10" transform="matrix(1 0 0 1 300 200)" stroke-width="1" stroke="#3C99B1" fill="url(#MyGradient)" filter="url(#monfiltre)" opacity="0.7"/>
<text x = "525" y = "75" fill = "#104E8B" font-size = "12" transform="matrix(1 0 0 1 50 50)" > 12 </text>
 
<!--BLOC LIENS/-->
<line x1="80" x2="170" y1="100" y2="100" style="fill:none;stroke:#C12FFF;stroke-width:1.5;" marker-end="url(#Triangle)" />
<line x1="280" x2="705" y1="85" y2="85" style="fill:none;stroke:#C12FFF;stroke-width:1.5;" marker-end="url(#Triangle)" />
<line x1="280" x2="350" y1="120" y2="120" style="fill:none;stroke:#C12FFF;stroke-width:1.5;" marker-end="url(#Triangle)" />
<!--line x1="370" x2="460" y1="85" y2="85" style="fill:none;stroke:#C12FFF;stroke-width:1.5;" marker-end="url(#Triangle)" /-->
<line x1="370" x2="460" y1="120" y2="120" style="fill:none;stroke:#C12FFF;stroke-width:1.5;" marker-end="url(#Triangle)" />
<path d="M220,140 V210 Q220,220 230,220 H350"
style="fill:none;stroke:#C12FFF;stroke-width:1.5" marker-end="url(#Triangle)"/>
 
<path d="M410,220 H500"
style="fill:none;stroke:#C12FFF;stroke-width:1.5" marker-end="url(#Triangle)"/>
 
<path d="M550,270 V350 Q550,360 560,360 H690"
style="fill:none;stroke:#C12FFF;stroke-width:1.5" marker-end="url(#Triangle)"/>
 
<!--Automatique/-->
<path d="M715,95 V340"
style="fill:none;stroke:#C12FFF;stroke-width:1.5" marker-end="url(#Triangle)"/>
 
<!--Retour/-->
<path d="M510,255 H60 Q50,255 50,245 V120"
style="fill:none;stroke:#237C92;stroke-width:1.5"  stroke-dasharray="5,5" marker-end="url(#Retour)"/>
 
<!--Retour/-->
<path d="M510,190 H480 V255"
style="fill:none;stroke:#237C92;stroke-width:1.5"  stroke-dasharray="5,5" />
</g>
</svg>
 
</body>
</html>

Merci d'avance

**emmanuel.remy** · 27/03/2009, 14h48

As tu finalement le besoin impératif de mettre ton svg dans du HTML ?

ERE

**gatlin** · 27/03/2009, 16h15

REbonjour
Je dois intégrer mon projet dans l'application de notre entreprise et toutes les fenêtres doivent avoir un style bien défini avec les CSS.

Cependant j'ai essayé d'enlever le HTML et laisser uniquement SVG avec du JSP et je remarque que IE m'affiche la fenêtre avec le graphique mais il suffit que j'actualise la fenêtre pour que l'image disparaîsse.

En ce moment je veux juste que ça marche et je peux me contenter du SVG et JSP uniquement

Voici le code

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
 
<?xml version="1.0" standalone="no"?>
<%@ page language="java" contentType="image/svg+xml; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" height="1000">
<defs>
 
     <filter id="monfiltre">
       <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="out1"/>
	   <feOffset in="out1" dx="4" dy="4" result="offsetBlur"/>
       <feSpecularLighting in="out1" specularExponent="20" surfaceScale="10" specularConstant=".75" lighting-color="#bbbbbb" result="out2">
         <fePointLight x="200" y="400" z="200"/>
       </feSpecularLighting>
	   <feComposite in="out2" in2="SourceAlpha" operator="in" result="specOut"/>
       <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
         k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
     </filter>
 
	 <feMerge>
		<feMergeNode in="offsetBlur"/>
		<feMergeNode in="litPaint"/>
     </feMerge>
 
 
     <filter id="monOmbre">
      <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
			<feOffset in="blur" dx="0" dy="0.1" result="offsetBlur"/>
			<feSpecularLighting in="blur" surfaceScale="10" specularConstant=".75" 
                          specularExponent="20" lighting-color="#bbbbbb"  
                          result="specOut">
				<fePointLight x="800" y="1000" z="200"/>
			</feSpecularLighting>
			<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
			<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" 
                   k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
			<feMerge>
				<feMergeNode in="offsetBlur"/>
				<feMergeNode in="litPaint"/>
			</feMerge>
     </filter>
 
 
	 <g id="arrowMarker"> 
               <g stroke="darkorange" stroke-width="0.4"> 
                    <line x1="4" y1="-1" x2="0" y2="0"/> 
                    <line x1="4" y1="+1" x2="0" y2="0"/> 
               </g> 
          </g> 
          <marker id="startMarker" markerWidth="48" markerHeight="24" viewBox="-4 -4 25 5" orient="auto" refX="0" refY="0" markerUnits="strokeWidth"> 
               <g> 
                    <use xlink:href="#arrowMarker" transform="rotate(180)" stroke-width="1" stroke="black"/> 
               </g> 
          </marker> 
 
		   <marker id="Triangle" viewBox="0 0 10 10" refX="10" refY="5"
			markerUnits="strokeWidth" markerWidth="4" markerHeight="4"
			orient="auto" stroke="#C12FFF" fill="#C12FFF">
			<path d="M0,0 L10,5 L0,10 z"/>
			</marker>
 
			<marker id="Retour" viewBox="0 0 10 10" refX="10" refY="5"
			markerUnits="strokeWidth" markerWidth="4" markerHeight="4"
			orient="auto" stroke="#237C92" fill="#237C92">
			<path d="M0,0 L10,5 L0,10 z"/>
			</marker>
 
			<linearGradient id = "gradient" x1 = "0%" y1 = "0%" x2 = "0%" y2 = "100%">
            <stop stop-color = "#78CA20" offset = "0%"/>
            <stop stop-color = "#BEF5B5" offset = "50%"/>
            <stop stop-color = "#FDFFFD" offset = "100%"/>
        </linearGradient>
 
		 <linearGradient id="MyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
			<stop stop-color = "#3C99B1" offset = "0%"/>
            <stop stop-color = "#98CFDC" offset = "50%"/>
            <stop stop-color = "#B9DEE7" offset = "100%"/>
      </linearGradient>
 
	  <linearGradient id="TRANS" x1="0%" y1="0%" x2="0%" y2="100%">
			 <stop offset="20%" stop-color="#F0BE20" />
			 <stop offset="80%" stop-color="#FBEAB5" />
      </linearGradient>
	  <linearGradient id="TRAITE" x1="0%" y1="0%" x2="0%" y2="100%">
			<stop stop-color = "#2D6D0C" offset = "0%"/>
            <stop stop-color = "#6E9B57" offset = "50%"/>
            <stop stop-color = "#C8D9BF" offset = "100%"/>
      </linearGradient>
   </defs>
 <!--rect x="0" y="0"  width="500" height="400" stroke="#0E0E0E" fill="#EEEEEE"/-->  
 
<g id="figures">
 
<!--BLOC ETATS/-->
<ellipse id="cercle" cx="-250" cy="-100" rx="30" ry="20" transform="matrix(1 0 0 1 300 200)" stroke-width="1" stroke="#3C99B1"  fill="url(#MyGradient)" filter="url(#monOmbre)"/>
<text x = "-4" y = "55" fill = "#104E8B" font-size = "18" font-family="Arial Black" transform="matrix(1 0 0 1 50 50)" > 1 </text>
<ellipse id="cercle" cx="80" cy="20" rx="30" ry="20" transform="matrix(1 0 0 1 300 200)" stroke-width="1" stroke="#3C99B1" fill="url(#MyGradient)" filter="url(#monOmbre)"/>
<text x = "325" y = "175" fill = "#104E8B" font-size = "18" font-family="Arial Black" transform="matrix(1 0 0 1 50 50)" > 2 </text>
<ellipse id="cercle" cx="420" cy="160" rx="30" ry="20" transform="matrix(1 0 0 1 300 200)" stroke-width="1" stroke="#3C99B1" fill="url(#MyGradient)" filter="url(#monOmbre)"/>
<text x = "665" y = "315" fill = "#104E8B" font-size = "18" font-family="Arial Black" transform="matrix(1 0 0 1 50 50)" > 3 </text>
 
 <!--BLOC TRAITEMENTS/-->  
<rect id="rectangle" x="120" y="20" rx="15" width="120" height="70" transform="matrix(1 0 0 1 50 50)" stroke-width="1" stroke="#2D6D0C" opacity="0.7" fill = "#DFDBDB" filter="url(#monOmbre)"/>
<rect id="rectangle1" x="130" y="25" rx="5" width="100" height="20" transform="matrix(1 0 0 1 50 50)" stroke-width="1" stroke="#2D6D0C"  opacity="0.5" fill="url(#TRAITE)" filter="url(#monOmbre)" />
<text x = "140" y = "38" fill = "#2D6D0C" font-size = "11" transform="matrix(1 0 0 1 50 50)" opacity="1"> Modifier </text>
<rect id="rectangle1" x="130" y="60" rx="5" width="100" height="20" transform="matrix(1 0 0 1 50 50)" stroke-width="1" stroke="#2D6D0C"  opacity="0.5" fill="url(#TRAITE)" filter="url(#monOmbre)" />
<text x = "140" y = "73" fill = "#2D6D0C" font-size = "11" transform="matrix(1 0 0 1 50 50)"  opacity="1"> Envoyer </text>
 
<rect id="rectangle" x="450" y="120" rx="15" width="120" height="100" transform="matrix(1 0 0 1 50 50)" stroke-width="1" stroke="#2D6D0C" opacity="0.5" fill = "#DFDBDB" filter="url(#monOmbre)"/>
<rect id="rectangle1" x="460" y="125" rx="5" width="100" height="20" transform="matrix(1 0 0 1 50 50)" stroke-width="1" stroke="#2D6D0C"  opacity="0.5" fill="url(#TRAITE)" filter="url(#monOmbre)" />
<text x = "470" y = "138" fill = "#2D6D0C" font-size = "11" transform="matrix(1 0 0 1 50 50)" opacity="1"> Ecrire </text>
<rect id="rectangle1" x="460" y="160" rx="5" width="100" height="20" transform="matrix(1 0 0 1 50 50)" stroke-width="1" stroke="#2D6D0C"  opacity="0.5" fill="url(#TRAITE)" filter="url(#monOmbre)" />
<text x = "470" y = "173" fill = "#2D6D0C" font-size = "11" transform="matrix(1 0 0 1 50 50)"  opacity="1"> Lire </text>
<rect id="rectangle1" x="460" y="195" rx="5" width="100" height="20" transform="matrix(1 0 0 1 50 50)" stroke-width="1" stroke="#2D6D0C"  opacity="0.5" fill="url(#TRAITE)" filter="url(#monOmbre)" />
<text x = "470" y = "208" fill = "#2D6D0C" font-size = "11" transform="matrix(1 0 0 1 50 50)"  opacity="1"> Effacer </text>
 
 <!--BLOC TRANSITIONS/-->
<!--ellipse id="cercle" cx="60" cy="-115" rx="10" ry="10" transform="matrix(1 0 0 1 300 200)" stroke-width="1" stroke="#40762C" fill="url(#TRANS)" filter="url(#monfiltre)"/-->
<ellipse id="cercle" cx="415" cy="-115" rx="10" ry="10" transform="matrix(1 0 0 1 300 200)" stroke-width="1" stroke="#104E8B" fill="url(#TRANS)"  filter="url(#monfiltre)" opacity="0.7"/>
<text x = "660" y = "40" fill = "#104E8B" font-size = "11" transform="matrix(1 0 0 1 50 50)" > A </text>
 
<ellipse id="cercle" cx="60" cy="-80" rx="10" ry="10" transform="matrix(1 0 0 1 300 200)" stroke-width="1" stroke="#104E8B" fill="url(#TRANS)"  filter="url(#monfiltre)" opacity="0.7"/>
<text x = "305" y = "75" fill = "#104E8B" font-size = "11" transform="matrix(1 0 0 1 50 50)" > C </text>
 
 <!--BLOC LISTE ETATS/-->
 
<rect id="rectangle" x="410" y="60" rx="5" width="150" height="20" transform="matrix(1 0 0 1 50 50)" stroke-width="1" stroke="#3C99B1" fill="#B9DEE7" opacity="0.7" filter="url(#monOmbre)"/>
<ellipse id="cercle" cx="190" cy="-80" rx="20" ry="10" transform="matrix(1 0 0 1 300 200)" stroke-width="1" stroke="#3C99B1" fill="url(#MyGradient)" filter="url(#monfiltre)" opacity="0.7"/>
<text x = "435" y = "75" fill = "#104E8B" font-size = "12" transform="matrix(1 0 0 1 50 50)" > 3 </text>
<ellipse id="cercle" cx="235" cy="-80" rx="20" ry="10" transform="matrix(1 0 0 1 300 200)" stroke-width="1" stroke="#3C99B1" fill="url(#MyGradient)" filter="url(#monfiltre)" opacity="0.7"/>
<text x = "480" y = "75" fill = "#104E8B" font-size = "12" transform="matrix(1 0 0 1 50 50)" > 8 </text>
<ellipse id="cercle" cx="280" cy="-80" rx="20" ry="10" transform="matrix(1 0 0 1 300 200)" stroke-width="1" stroke="#3C99B1" fill="url(#MyGradient)" filter="url(#monfiltre)" opacity="0.7"/>
<text x = "525" y = "75" fill = "#104E8B" font-size = "12" transform="matrix(1 0 0 1 50 50)" > 12 </text>
 
<!--BLOC LIENS/-->
<line x1="80" x2="170" y1="100" y2="100" style="fill:none;stroke:#C12FFF;stroke-width:1.5;" marker-end="url(#Triangle)" />
<line x1="280" x2="705" y1="85" y2="85" style="fill:none;stroke:#C12FFF;stroke-width:1.5;" marker-end="url(#Triangle)" />
<line x1="280" x2="350" y1="120" y2="120" style="fill:none;stroke:#C12FFF;stroke-width:1.5;" marker-end="url(#Triangle)" />
<!--line x1="370" x2="460" y1="85" y2="85" style="fill:none;stroke:#C12FFF;stroke-width:1.5;" marker-end="url(#Triangle)" /-->
<line x1="370" x2="460" y1="120" y2="120" style="fill:none;stroke:#C12FFF;stroke-width:1.5;" marker-end="url(#Triangle)" />
<path d="M220,140 V210 Q220,220 230,220 H350"
style="fill:none;stroke:#C12FFF;stroke-width:1.5" marker-end="url(#Triangle)"/>
 
<path d="M410,220 H500"
style="fill:none;stroke:#C12FFF;stroke-width:1.5" marker-end="url(#Triangle)"/>
 
<path d="M550,270 V350 Q550,360 560,360 H690"
style="fill:none;stroke:#C12FFF;stroke-width:1.5" marker-end="url(#Triangle)"/>
 
<!--Automatique/-->
<path d="M715,95 V340"
style="fill:none;stroke:#C12FFF;stroke-width:1.5" marker-end="url(#Triangle)"/>
 
<!--Retour/-->
<path d="M510,255 H60 Q50,255 50,245 V120"
style="fill:none;stroke:#237C92;stroke-width:1.5"  stroke-dasharray="5,5" marker-end="url(#Retour)"/>
 
<!--Retour/-->
<path d="M510,190 H480 V255"
style="fill:none;stroke:#237C92;stroke-width:1.5"  stroke-dasharray="5,5" />
</g>
</svg>

Merci d'avance

**emmanuel.remy** · 27/03/2009, 16h36

Si cela fonctionne avec Firefox en HTML et pas avec IE, mais que cela fonctionne en SVG avec IE, ne serait ce pas une solution de détecter sur ton server le type de client et:

si Firefox, générer la page directement
si IE, pourquoi ne pas intégrer un IFrame dans lequel tu charges ton SVG ?

ERE

**gatlin** · 27/03/2009, 16h58

Je tiens à préciser que l'application est faite uniquement pour IE.
Je dois travailler entièrement pour IE et faire une page de paramétrage de workflow sur des pages JSP avec SVG.

Il y'aura une partie de la page où on va mettre la liste des traitements et états possibles et ces infos sont dans une BDD oracle.

L'utilisateur va dessiner le workflow (avec des drag 'n drop) que je vais interpréter pour alimenter ma table des états,traitements et transitions.Voila en résumé ce que je vais faire.

Ce sera du SVG dynamique,le JSP sert d'interface entre la page et la BDD

Merci d'avance

**emmanuel.remy** · 27/03/2009, 17h06

Et bien mets ton svg dans un IFrame. Tt charges y le SVG. Comme ça dans ta page principale tu conserves les CSS et autres et dans l'IFrame tu as le SVG

ERE

SVG combiné avec du HTML

HTML

Vue hybride

Discussions similaires

Partager

Partager