Adaptation javascript pour SVG

Bonjour,

J'ai trouve un script sympa "Superformula" pour changer les parametres d'un path dans une forme SVG. Seulement je n'arrive pas a adapter ce script a l'ensemble des path d'un fichier.
Merci de m'aider a m'orenter vers une idee, une direction ou un conseil

Merci

D.

Bonjour,
je penses qu'il serait bon que tu reformules ta question, perso je n'ai rien compris � ton besoin :aie:

Actuellement ce sript http://bl.ocks.org/mbostock/1021103
permet de changer les parametres d'UN seule polygon plus exactement d'un path en SVG, et d'en changer sa forme

J'aimerais que ce script agisse sur tous les "path" d'un fichier svg .

qu'est ce qui t'emp�che de faire une boucle sur tes paths?

Mes comp�tences :lol:
Est ce qu'il serait pas plus simle (pour moi) de lui mettre l'URL du fichier quelque part ?

On ne demande pas mieux que de t'aider mais il faudrait que tu ais fait un minimum ce qui ne semble pas bien �tre le cas.

Montre nous ce qui te pose probl�me dans ce que tu as r�alis�.

J'ai supprimer le JS qui g�n�re les balises svg et path.big
puis jy ajoute manuellement mon svg avec les memes class
mais �videment ca ne fonctionne pas ...

j'ai quand m�me l'impression que tu trouverais plus d'�cho si tu voulais bien nous fournir un peu de code.

Ok, voici mon adaptation du code et merci de continuer a suivre ce post
C'est sympa

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
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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
 
<!DOCTYPE html>
<meta charset="utf-8">
<title>Superformula</title>
<style>
 
path {
  stroke-width: 1.5px;
  stroke: #666;
  fill: #ddd;
}
 
#controls {
  position: absolute;
  width: 240px;
  font: 10px sans-serif;
}
 
#controls span,
#controls label {
  position: relative;
  top: -5px;
  padding: 5px;
  display: inline-block;
  width: 20px;
}
 
#controls button {
  font: 10px sans-serif;
  padding: 5px;
  width: 70px;
}
 
</style>
<div id="controls"></div>
<script src="http://d3js.org/d3.v2.min.js"></script>
<script src="https://raw.github.com/d3/d3-plugins/master/superformula/superformula.js"></script>
<script>
 
var types = {
  asterisk: {m: 12, n1: .3, n2: 0, n3: 10, a: 1, b: 1},
  bean: {m: 2, n1: 1, n2: 4, n3: 8, a: 1, b: 1},
  butterfly: {m: 3, n1: 1, n2: 6, n3: 2, a: .6, b: 1},
  circle: {m: 4, n1: 2, n2: 2, n3: 2, a: 1, b: 1},
  clover: {m: 6, n1: .3, n2: 0, n3: 10, a: 1, b: 1},
  cloverFour: {m: 8, n1: 10, n2: -1, n3: -8, a: 1, b: 1},
  cross: {m: 8, n1: 1.3, n2: .01, n3: 8, a: 1, b: 1},
  diamond: {m: 4, n1: 1, n2: 1, n3: 1, a: 1, b: 1},
  drop: {m: 1, n1: .5, n2: .5, n3: .5, a: 1, b: 1},
  ellipse: {m: 4, n1: 2, n2: 2, n3: 2, a: 9, b: 6},
  gear: {m: 19, n1: 100, n2: 50, n3: 50, a: 1, b: 1},
  heart: {m: 1, n1: .8, n2: 1, n3: -8, a: 1, b: .18},
  heptagon: {m: 7, n1: 1000, n2: 400, n3: 400, a: 1, b: 1},
  hexagon: {m: 6, n1: 1000, n2: 400, n3: 400, a: 1, b: 1},
  malteseCross: {m: 8, n1: .9, n2: .1, n3: 100, a: 1, b: 1},
  pentagon: {m: 5, n1: 1000, n2: 600, n3: 600, a: 1, b: 1},
  rectangle: {m: 4, n1: 100, n2: 100, n3: 100, a: 2, b: 1},
  roundedStar: {m: 5, n1: 2, n2: 7, n3: 7, a: 1, b: 1},
  square: {m: 4, n1: 100, n2: 100, n3: 100, a: 1, b: 1},
  star: {m: 5, n1: 30, n2: 100, n3: 100, a: 1, b: 1},
  triangle: {m: 3, n1: 100, n2: 200, n3: 200, a: 1, b: 1}
};
 
var format = d3.format(".4n"),
    scale = d3.scale.linear().domain([-10, 20, 1000]).range([0, 800, 1000]);
 
var svg = d3.select("body").append("svg")
    .attr("width", 960)
    .attr("height", 500);
 
var shape = d3.superformula()
    .type("asterisk")
    .size(100000)
    .segments(3600);
 
var path = svg.append("path")
 
 
var control = d3.select("#controls").selectAll("div")
    .data(d3.entries(types.asterisk))
  .enter().append("div")
    .attr("id", function(d) { return d.key; });
 
control.append("label")
    .text(function(d) { return d.key; });
 
control.append("input")
    .attr("type", "range")
    .attr("max", 1000)
    .attr("min", 0)
    .property("value", function(d) { return scale(d.value); })
    .on("change", function(d) {
      var v = scale.invert(this.value);
      path.attr("d", shape.param(d.key, v));
      d3.select(this.nextSibling).text(format(v));
    });
 
control.append("span")
    .text(function(d) { return format(d.value); });
 
var types = d3.select("#controls").append("div").selectAll("button")
    .data(d3.entries(types))
  .enter().append("button")
    .text(function(d) { return d.key; })
    .on("click", function(d) {
      for (var param in d.value) {
        var control = d3.select("#" + param);
        control.select("input").property("value", scale(d.value[param]));
        control.select("span").text(format(d.value[param]));
        shape.param(param, d.value[param]);
      }
      path.attr("d", shape);
    });
 
</script>
 
 <body>
<svg class="big"
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   width="100%"
   height="100%"
   viewBox="0 0 915.19501 585.14453"
   id="svg114">
  <metadata
     id="metadata224">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
     id="defs116">
    <linearGradient
       x1="791.12482"
       y1="159.45061"
       x2="439.74969"
       y2="426.20889"
       id="linearGradient192"
       gradientUnits="userSpaceOnUse">
      <stop
         id="stop119"
         style="stop-color:#3333ff;stop-opacity:1"
         offset="0" />
      <stop
         id="stop121"
         style="stop-color:#3f3fff;stop-opacity:0"
         offset="1" />
    </linearGradient>
    <linearGradient
       x1="312.3125"
       y1="168.0827"
       x2="-39.062599"
       y2="434.841"
       id="linearGradient4345"
       gradientUnits="userSpaceOnUse">
      <stop
         id="stop124"
         style="stop-color:#333333;stop-opacity:1"
         offset="0" />
      <stop
         id="stop126"
         style="stop-color:#ffffff;stop-opacity:0"
         offset="1" />
    </linearGradient>
  </defs>
  <g
     id="Vector"
     style="fill:#282890">
    <path
       d="m 568.6259,522.8354 -27.832,-72.9004 10.3027,0 23.0957,61.377 23.1445,-61.377 10.2539,0 -27.7832,72.9004 L 568.6259,522.8354 Z"
       id="path170" />
    <path
       d="m 704.8622,470.2475 0,8.3984 q -3.8086,-2.0996 -7.666,-3.125 -3.8086,-1.0742 -7.7149,-1.0742 -8.7402,0 -13.5742,5.5664 -4.834,5.5176 -4.834,15.5274 0,10.0098 4.834,15.5762 4.834,5.5176 13.5742,5.5176 3.9063,0 7.7149,-1.0254 3.8574,-1.0742 7.666,-3.1738 l 0,8.3008 q -3.7598,1.7578 -7.8125,2.6367 -4.0039,0.8789 -8.5449,0.8789 -12.3535,0 -19.6289,-7.7637 -7.2754,-7.7637 -7.2754,-20.9473 0,-13.3789 7.3242,-21.0449 7.3731,-7.666 20.166,-7.666 4.1504,0 8.1055,0.8789 Q 701.1513,468.5386 704.8622,470.2476 Z"
       id="path174" />
    <path
       d="m 726.4716,452.6205 0,15.5274 18.5059,0 0,6.9824 -18.5059,0 0,29.6875 q 0,6.6894 1.8066,8.5938 1.8555,1.9043 7.4707,1.9043 l 9.2285,0 0,7.5195 -9.2285,0 q -10.4004,0 -14.3555,-3.8574 -3.9551,-3.9063 -3.9551,-14.1602 l 0,-29.6875 -6.5918,0 0,-6.9824 6.5918,0 0,-15.5274 L 726.4715,452.6205 Z"
       id="path176" />
    <path
       d="m 775.0341,474.4467 q -7.2266,0 -11.4258,5.6641 -4.1992,5.6152 -4.1992,15.4297 0,9.8145 4.1504,15.4785 4.1992,5.6152 11.4746,5.6152 7.1777,0 11.377,-5.6641 4.1993,-5.6641 4.1992,-15.4297 0,-9.7168 -4.1992,-15.3809 Q 782.2119,474.4466 775.0342,474.4466 z m 0,-7.6172 q 11.7188,0 18.4082,7.6172 6.6894,7.6172 6.6894,21.0938 0,13.4277 -6.6894,21.0938 -6.6894,7.6172 -18.4082,7.6172 -11.7676,0 -18.457,-7.6172 -6.6406,-7.666 -6.6406,-21.0938 0,-13.4766 6.6406,-21.0938 Q 763.2666,466.8295 775.0341,466.8295 Z"
       id="path178" />
    <path
       d="m 843.6649,476.5463 q -1.5137,-0.8789 -3.3203,-1.2695 -1.7578,-0.4395 -3.9063,-0.4395 -7.6172,0 -11.7188,4.9805 -4.0527,4.9316 -4.0527,14.209 l 0,28.8086 -9.0332,0 0,-54.6875 9.0332,0 0,8.4961 q 2.832,-4.9805 7.3731,-7.373 4.541,-2.4414 11.0352,-2.4414 0.9277,0 2.0508,0.1465 1.1231,0.0977 2.4902,0.3418 L 843.6649,476.5464 Z"
       id="path180" />
    <use
       transform="translate(302.80678,-41.274189)"
       id="use4358"
       style="fill:#282890"
       x="0"
       y="0"
       width="915.19501"
       height="585.14453"
       xlink:href="#sans-e" />
  </g>
  <g
     transform="translate(-38.260002,-48.098288)"
     id="Raster">
    <path
       d="m 144.8585,529.5563 q 3.1738,1.0742 6.1524,4.5899 3.0273,3.5156 6.0547,9.668 l 10.0098,19.9219 -10.5957,0 -9.3262,-18.7012 q -3.6133,-7.3242 -7.0313,-9.7168 -3.3691,-2.3926 -9.2285,-2.3926 l -10.7422,0 0,30.8105 -9.8633,0 0,-72.9004 22.2656,0 q 12.5,0 18.6523,5.2246 6.1523,5.2246 6.1523,15.7715 0,6.8848 -3.2226,11.4258 Q 150.962,527.7985 144.8584,529.5563 z m -24.707,-30.6152 0,25.8789 12.4023,0 q 7.1289,0 10.7422,-3.2715 3.6621,-3.3203 3.6621,-9.7168 0,-6.3965 -3.6621,-9.6191 -3.6133,-3.2715 -10.7422,-3.2715 L 120.1515,498.9411 Z"
       id="path184" />
    <path
       d="m 196.2239,536.2457 q -10.8887,0 -15.0879,2.4902 -4.1992,2.4902 -4.1992,8.4961 0,4.7851 3.125,7.6172 3.1738,2.7832 8.5938,2.7832 7.4707,0 11.9629,-5.2734 4.541,-5.3223 4.541,-14.1113 l 0,-2.0019 L 196.2239,536.2458 z m 17.9199,-3.7109 0,31.2012 -8.9844,0 0,-8.3008 q -3.0762,4.9805 -7.666,7.3731 -4.5898,2.3438 -11.2305,2.3438 -8.3984,0 -13.3789,-4.6875 -4.9316,-4.7363 -4.9316,-12.6465 0,-9.2285 6.1523,-13.916 6.2012,-4.6875 18.457,-4.6875 l 12.5977,0 0,-0.8789 q 0,-6.2012 -4.1016,-9.5703 -4.0527,-3.418 -11.4258,-3.418 -4.6875,0 -9.1309,1.1231 -4.4434,1.1231 -8.5449,3.3691 l 0,-8.3008 q 4.9316,-1.9043 9.5703,-2.832 4.6387,-0.9766 9.0332,-0.9766 11.8652,0 17.7246,6.1524 Q 214.1437,520.035 214.1437,532.5349 Z"
       id="path186" />
    <path
       d="m 261.6518,510.6598 0,8.4961 q -3.8086,-1.9531 -7.9101,-2.9297 -4.1015,-0.9766 -8.4961,-0.9766 -6.6894,0 -10.0586,2.0508 -3.3203,2.0508 -3.3203,6.1523 0,3.125 2.3926,4.9316 2.3926,1.7578 9.6191,3.3691 l 3.0762,0.6836 q 9.5703,2.0508 13.5742,5.8106 4.0527,3.7109 4.0527,10.4004 0,7.6172 -6.0547,12.0605 -6.0059,4.4434 -16.5527,4.4434 -4.3945,0 -9.1797,-0.8789 -4.7363,-0.8301 -10.0098,-2.5391 l 0,-9.2773 q 4.9805,2.5879 9.8145,3.9063 4.834,1.2695 9.5703,1.2695 6.3477,0 9.7656,-2.1484 3.418,-2.1973 3.418,-6.1523 0,-3.6621 -2.4902,-5.6152 -2.4414,-1.9531 -10.791,-3.7598 l -3.125,-0.7324 q -8.3496,-1.7578 -12.0605,-5.3711 -3.7109,-3.6621 -3.7109,-10.0098 0,-7.7148 5.4688,-11.9141 5.4688,-4.1993 15.5274,-4.1992 4.9805,0 9.375,0.7324 Q 257.9411,509.1949 261.6521,510.6598 Z"
       id="path188" />
    <path
       d="m 281.9136,493.5211 0,15.5273 18.5059,0 0,6.9824 -18.5059,0 0,29.6875 q 0,6.6895 1.8066,8.5938 1.8555,1.9043 7.4707,1.9043 l 9.2285,0 0,7.5195 -9.2285,0 q -10.4004,0 -14.3555,-3.8574 -3.9551,-3.9063 -3.9551,-14.1602 l 0,-29.6875 -6.5918,0 0,-6.9824 6.5918,0 0,-15.5273 L 281.9135,493.5211 Z"
       id="path190" />
    <path
       d="m 353.1521,534.1461 0,4.3945 -41.3086,0 c 0.3906,6.18487 2.24607,10.90493 5.5664,14.1602 11.45946,6.87367 23.37954,5.14757 33.6426,-0.2441 l 0,8.4961 c -6.60794,2.73918 -13.58867,4.17319 -20.2148,4.1992 -8.72393,0 -15.64127,-2.53907 -20.752,-7.6172 -5.07813,-5.07813 -7.6172,-11.94663 -7.6172,-20.6055 0,-8.9518 2.40887,-16.04817 7.2266,-21.2891 10.71927,-9.69749 27.8253,-10.68721 37.0117,-0.7813 C 351.12125,521.11973 353.09164,528.19432 353.1521,534.1461 z m -8.9844,-2.6367 c -0.0651,-4.9154 -1.4486,-8.83793 -4.1504,-11.7676 -6.38773,-5.99624 -16.85372,-5.44943 -22.705,-0.1464 -2.9948,2.832 -4.72007,6.81963 -5.1758,11.9629 L 344.1677,531.5095 Z"
       id="sans-e" />
    <path
       d="m 393.6776,517.4469 q -1.5137,-0.8789 -3.3203,-1.2695 -1.7578,-0.4395 -3.9063,-0.4395 -7.6172,0 -11.7188,4.9805 -4.0527,4.9316 -4.0527,14.209 l 0,28.8086 -9.0332,0 0,-54.6875 9.0332,0 0,8.4961 q 2.832,-4.9805 7.3731,-7.3731 4.541,-2.4414 11.0352,-2.4414 0.9277,0 2.0508,0.1465 1.123,0.0976 2.4902,0.3418 L 393.6776,517.4469 Z"
       id="path194" />
  </g>
  <g
     id="jpeg-gif-png">
    <use
       transform="matrix(0.40140353,0,0,0.3993733,1.9210693,335.58053)"
       id="use4301"
       x="0"
       y="0"
       width="915.19501"
       height="585.14453"
       xlink:href="#sans-e" />
    <use
       transform="translate(177.68619,0.0966211)"
       id="use3389"
       x="0"
       y="0"
       width="915.19501"
       height="585.14453"
       xlink:href="#sans-g" />
    <use
       transform="translate(50.822696,5.1941561e-7)"
       id="use3387"
       x="0"
       y="0"
       width="915.19501"
       height="585.14453"
       xlink:href="#sans-g" />
    <path
       d="m 76.4248,556.1345 4.1211,0 0,4.9609 -4.1211,0 L 76.4248,556.1345 Z"
       id="path132" />
    <path
       d="m 88.6513,539.2204 3.5938,0 0,22.2656 q 0,4.1797 -1.6016,6.0547 -1.582,1.875 -5.1172,1.875 l -1.3672,0 0,-3.0469 0.957,0 q 2.0508,0 2.793,-0.957 0.7422,-0.9375 0.7422,-3.9258 L 88.6513,539.2204 z m 0,-8.5156 3.5938,0 0,4.5508 -3.5938,0 L 88.6513,530.7048 Z"
       id="path134" />
    <path
       d="m 103.2217,557.8142 0,11.6016 -3.6133,0 0,-30.1953 3.6133,0 0,3.3203 q 1.1328,-1.9531 2.8516,-2.8906 1.7383,-0.957 4.1406,-0.957 3.9844,0 6.4648,3.1641 2.5,3.1641 2.5,8.3203 0,5.1562 -2.5,8.3203 -2.4805,3.1641 -6.4648,3.1641 -2.4024,0 -4.1406,-0.9375 Q 104.3545,559.7675 103.2217,557.8144 z m 12.2266,-7.6367 q 0,-3.9648 -1.6406,-6.2109 -1.6211,-2.2656 -4.4727,-2.2656 -2.8516,0 -4.4922,2.2656 -1.6211,2.2461 -1.6211,6.2109 0,3.9648 1.6211,6.2305 1.6406,2.2461 4.4922,2.2461 2.8516,0 4.4727,-2.2461 Q 115.4483,554.1424 115.4483,550.1775 Z"
       id="path136" />
    <path
       d="m 162.5185,543.8493 c -2.59122,-2.75626 -6.88999,-2.73256 -9.0234,0 -1.92069,3.70387 -2.43989,8.70167 0,12.0899 2.5887,2.74256 6.90378,2.7462 9.0234,0 C 164.46745,552.24569 164.97824,547.22445 162.5185,543.8493 z m 5.2149,14.5313 c 0.11753,6.88849 -4.18232,10.97448 -10.0782,11.0352 -2.39234,-0.0202 -4.75314,-0.38966 -6.8359,-1.1524 l 0,-3.4961 c 1.99666,1.06827 4.17616,1.66933 6.2695,1.6797 4.8235,0.0239 7.0155,-3.53465 7.0508,-7.4219 l 0,-1.7774 c -0.7422,1.28907 -1.69273,2.2526 -2.8516,2.8906 -3.69219,1.75549 -8.36659,0.6415 -10.6446,-2.1094 -3.16174,-4.87131 -3.41141,-11.88176 0,-16.2695 2.98469,-3.0353 7.09467,-4.01219 10.6446,-2.1094 1.15887,0.638 2.1094,1.60153 2.8516,2.8906 l 0,-3.3203 3.5938,0 L 167.7334,558.3804 Z"
       id="sans-g" />
    <path
       d="m 188.3779,556.1345 4.1211,0 0,4.9609 -4.1211,0 L 188.3779,556.1345 Z"
       id="path142" />
    <path
       d="m 225.9951,539.2204 3.5938,0 0,21.875 -3.5938,0 L 225.9951,539.2204 z m 0,-8.5156 3.5938,0 0,4.5508 -3.5938,0 L 225.9951,530.7048 Z"
       id="path146" />
    <path
       d="m 248.1631,530.7048 0,2.9883 -3.4375,0 q -1.9336,0 -2.6953,0.7813 -0.7422,0.7813 -0.7422,2.8125 l 0,1.9336 5.918,0 0,2.793 -5.918,0 0,19.082 -3.6133,0 0,-19.082 -3.4375,0 0,-2.793 3.4375,0 0,-1.5234 q 0,-3.6523 1.6992,-5.3125 1.6992,-1.6797 5.3906,-1.6797 L 248.163,530.7049 Z"
       id="path148" />
    <path
       d="m 264.3935,556.1345 4.1211,0 0,4.9609 -4.1211,0 L 264.3935,556.1345 Z"
       id="path150" />
    <path
       d="m 280.0967,557.8142 0,11.6016 -3.6133,0 0,-30.1953 3.6133,0 0,3.3203 q 1.1328,-1.9531 2.8516,-2.8906 1.7383,-0.957 4.1406,-0.957 3.9844,0 6.4648,3.1641 2.5,3.1641 2.5,8.3203 0,5.1562 -2.5,8.3203 -2.4805,3.1641 -6.4648,3.1641 -2.4024,0 -4.1406,-0.9375 Q 281.2295,559.7675 280.0967,557.8144 z m 12.2266,-7.6367 q 0,-3.9648 -1.6406,-6.2109 -1.6211,-2.2656 -4.4727,-2.2656 -2.8516,0 -4.4922,2.2656 -1.6211,2.2461 -1.6211,6.2109 0,3.9648 1.6211,6.2305 1.6406,2.2461 4.4922,2.2461 2.8516,0 4.4727,-2.2461 Q 292.3233,554.1424 292.3233,550.1775 Z"
       id="path152" />
    <path
       d="m 320.1943,547.8923 0,13.2031 -3.5938,0 0,-13.0859 q 0,-3.1055 -1.2109,-4.6484 -1.2109,-1.5429 -3.6328,-1.543 -2.9102,0 -4.5899,1.8555 -1.6797,1.8555 -1.6797,5.0586 l 0,12.3633 -3.6133,0 0,-21.875 3.6133,0 0,3.3984 q 1.2891,-1.9727 3.0274,-2.9492 1.7578,-0.9766 4.043,-0.9766 3.7695,0 5.7031,2.3438 Q 320.1943,543.3611 320.1943,547.8924 Z"
       id="path154" />
  </g>
  <g
     id="svg"
     style="fill:#282890">
    <path
       d="m 642.6728,559.4139 4.1211,0 0,4.9609 -4.1211,0 L 642.6728,559.4139 Z"
       id="path160" />
    <path
       d="m 668.8447,543.1444 0,3.3984 q -1.5234,-0.7813 -3.1641,-1.1719 -1.6407,-0.3906 -3.3984,-0.3906 -2.6758,0 -4.0234,0.8203 -1.3281,0.8203 -1.3281,2.4609 0,1.25 0.957,1.9727 0.957,0.7031 3.8477,1.3477 l 1.2305,0.2734 q 3.8281,0.8203 5.4297,2.3242 1.6211,1.4844 1.6211,4.1602 0,3.0469 -2.4219,4.8242 -2.4024,1.7773 -6.6211,1.7773 -1.7578,0 -3.6719,-0.3516 -1.8945,-0.332 -4.0039,-1.0156 l 0,-3.7109 q 1.9922,1.0352 3.9258,1.5625 1.9336,0.5078 3.8281,0.5078 2.5391,0 3.9063,-0.8594 1.3672,-0.8789 1.3672,-2.4609 0,-1.4649 -0.9961,-2.2461 -0.9766,-0.7813 -4.3164,-1.5039 l -1.25,-0.293 q -3.3398,-0.7031 -4.8242,-2.1484 -1.4844,-1.4648 -1.4844,-4.0039 0,-3.0859 2.1875,-4.7656 2.1875,-1.6797 6.2109,-1.6797 1.9922,0 3.75,0.293 Q 667.3604,542.5585 668.8448,543.1444 Z"
       id="path162" />
    <path
       d="m 673.1806,542.4998 3.8086,0 6.8359,18.3594 6.8359,-18.3594 3.8086,0 -8.2031,21.875 -4.8828,0 L 673.1806,542.4998 Z"
       id="path164" />
    <use
       transform="translate(549.77403,3.2851172)"
       id="use3391"
       style="fill:#282890"
       x="0"
       y="0"
       width="915.19501"
       height="585.14453"
       xlink:href="#sans-g" />
  </g>
  <path
     d="m 196.9684,97.8073 c 90.4414,133.7157 190.4153,75.4233 203.323,158.606 -11.9148,114.33 -136.829,115.5743 -369.6074,116.457 -4.3017,-1.0684 -1.9344,-3.592 -0.6148,-37.262 C 106.081,298.3195 181.1924,209.6737 196.9684,97.8074 Z"
     id="RasterGradient"
     style="fill:url(#linearGradient4345)" />
  <path
     d="m 11.785,11.785 410.8837,0 0,410.8837 L 11.785,422.6687 Z"
     id="path196"
     style="fill:none;stroke:#000000;stroke-width:3.45020008" />
  <path
     d="m 488.951,11.7262 414.5189,0 0,411.0295 L 488.951,422.7557 Z"
     id="path198"
     style="fill:none;stroke:#404091;stroke-width:3.45020008" />
  <path
     d="m 875.8243,244.5018 c -11.9148,114.33 -133.5496,118.8537 -366.328,119.7364 -4.3017,-1.0684 -1.9344,-3.592 -0.6148,-37.262 C 584.8933,289.6874 642.86678,216.04814 658.64278,104.18184 696.65762,152.21406 867.73065,204.9776 875.8243,244.5018 Z"
     id="VectorGradient"
     style="fill:url(#linearGradient192)" />
  <g
     transform="matrix(1.35527,0,0,1.28322,-156.30578,-633.12626)"
     id="RasterLarge">
    <path
       d="m 287.1429,729.5051 -30,0 0,-60 20,0 0,20 10,0 0,10 10,0 0,10 20,0 0,10 40,0 0,-10 20,0 0,-20 10,0 0,-20 -10,0 0,-10 -10,0 0,-10 -40,0 0,-10 -30,0 0,-10 -20,0 0,-10 -10,0 0,-10 -10,0 0,-60 10,0 0,-10 10,0 0,-10 10,0 0,-10 90,0 0,10 30,0 0,60 -20,0 0,-10 -10,0 0,-20 -10,0 0,-10 -20,0 0,-10 -30,0 0,10 -20,0 0,10 -10,0 0,20 10,0 0,20 30,0 0,10 30,0 0,10 30,0 0,10 10,0 0,10 10,0 0,10 10,0 0,60 -10,0 0,10 -10,0 0,10 -10,0 0,10 -100,0 L 287.1429,729.5051 Z"
       id="path204"
       style="fill:#979797" />
    <path
       d="m 297.1429,729.5051 -30,0 0,-10 -10,0 0,-50 20,0 0,20 10,0 0,20 10,0 10,0 0,10 60,0 0,-10 10,0 0,-10 10,0 0,-40 -20,0 0,-10 -20,0 0,-10 -40,0 0,-10 -20,0 0,-10 -20,0 0,-20 -10,0 0,-50 10,0 0,-10 10,0 0,-10 20,0 0,-10 70,0 0,10 30,0 0,10 10,0 0,50 -20,0 0,-20 -10,0 0,-20 -20,0 0,-10 -50,0 0,10 -10,0 0,10 -10,0 0,30 10,0 0,10 20,0 0,10 30,0 0,10 30,0 0,10 20,0 0,10 10,0 0,10 10,0 0,50 -10,0 0,20 -10,0 0,10 -20,0 0,10 L 297.1429,739.5051 Z"
       id="path206"
       style="fill:#555555" />
    <path
       d="m 307.1429,729.5051 -30,0 0,-10 -20,0 0,-50 20,0 0,30 10,0 0,10 10,0 0,10 70,0 0,-10 20,0 0,-50 -10,0 0,-10 -20,0 0,-10 -40,0 0,-10 -30,0 0,-10 -10,0 0,-10 -10,0 0,-20 -10,0 0,-30 10,0 0,-20 20,0 0,-10 20,0 0,-10 50,0 0,10 30,0 0,10 20,0 0,50 -20,0 0,-30 -10,0 0,-10 -10,0 0,-10 -70,0 0,10 -10,0 0,40 10,0 0,10 10,0 0,10 30,0 0,10 40,0 0,10 20,0 0,10 10,0 0,20 10,0 0,40 -10,0 0,20 -20,0 0,10 -30,0 0,10 -50,0 L 307.1429,729.5051 Z"
       id="path208"
       style="fill:#000000" />
  </g>
  <path
     d="m 659.95963,293.28085 0,-62.4662 23.78151,0.18371 c -1.01071,61.49272 93.82963,73.05392 135.34794,48.22763 21.39465,-17.53681 26.4767,-50.46192 7.65143,-68.25353 C 783.17587,179.93194 712.20344,183.60228 674.33194,149.60856 645.894,115.58757 654.01944,68.403147 688.33346,43.878575 750.68165,16.112624 806.63071,27.796208 864.27409,43.416021 l 0,58.424249 -23.36791,0 c -4.5044,-41.043403 -45.45215,-53.094809 -81.7272,-53.337136 -48.73789,4.00185 -86.70692,42.202753 -49.79502,75.567726 45.8982,30.05214 115.79723,26.39806 152.512,60.90447 27.88628,31.7753 13.76265,86.54478 -17.42335,109.31261 C 778.4431,322.17734 720.06796,313.72598 659.95974,293.28066 Z"
     id="VectorLarge"
     style="fill:#00005f" />
  <use
     transform="matrix(0.15161479,0,0,0.17311505,0.72963561,321.43958)"
     id="RasterSmall"
     x="0"
     y="0"
     width="915.19501"
     height="585.14453"
     xlink:href="#RasterLarge" />
  <use
     transform="matrix(0.1489017,0,0,0.16997699,407.73458,313.14188)"
     id="VectorSmall"
     x="0"
     y="0"
     width="915.19501"
     height="585.14453"
     xlink:href="#VectorLarge" />
</svg>
 
</body>

Je suis toujours dessu en train d'essayer : / mais je commence a me demander tout simplement :
Est ce que, ce que j'essaye de faire est en faite impossible ?
Qu'en pensez vous ?

Peut �tre faudrait-il que tu mettes tes paths au format des types indiqu�s, mais pas trop regard� comment il fonctionne

Les path peuvent avoir n'importe quel format de types, a partir du moment ou les Superformula s'appliquent a plusieurs path en m�me temps.
Dans mon code, le fichier SVG est un exemple mais il pourrait s'agir d'un fichier plus simple

Bref, si ce script s'applique a deux paths en m�me temps, c'est gagn� :)

De ce que je viens de voir sur http://bl.ocks.org/mbostock/raw/1020902/, il y a, � partir de donn�es type, cr�ation d'une forme g�om�trique au format svg
exemple de donn�es :
Code:

1 2 3 4 5 6 7 8 triangle: { m: 3, n1: 100, n2: 200, n3: 200, a: 1, b: 1 }
il y a donc morphing entre 2 figures mais sur base du m�me type de donn�es, m, n1, n2,...etc

Donc pas s�r du tout que cela soit ce que tu souhaites.

Alors je sais pas si cela rend l'affaire plus r�alisable, il se trouve que mon fichier SVG sera une liste de path avec la meme structure mais des valeurs diff�rentes.

Dans ce lien, le script s'applique a la class "big"
Est il possible de le faire appliquer a plusieurs bigN+ ?

D.

Si tu n'es pas attach� � cette librairie, il existe entre autres, la librairie Rapha�l qui peut faire cela en utilisant dans ce cas des paths.

Un exemple sur base de tes paths

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Raphaël—JavaScript Library</title>
<style>
body{
  background:#222;
}
#scene{
  background-color:#000;
  margin:20px auto;
  height:800px;
  width:1000px;
  border:1px solid red"
}
a{
  color:white;
}
</style>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
</head>
<body>
<a href="http://raphaeljs.com/reference.html">Raphaël—JavaScript Library</a>
<div id="scene"></div>
<script>
(function(){
  var canvas = new Raphael(document.getElementById('scene'));
  var shapes=[];
  shapes.push({path:'m 196.9684,97.8073 c 90.4414,133.7157 190.4153,75.4233 203.323,158.606 -11.9148,114.33 -136.829,115.5743 -369.6074,116.457 -4.3017,-1.0684 -1.9344,-3.592 -0.6148,-37.262 C 106.081,298.3195 181.1924,209.6737 196.9684,97.8074 Z',fill: '#6bb6e8'});
  shapes.push({path:'m 88.6513,539.2204 3.5938,0 0,22.2656 q 0,4.1797 -1.6016,6.0547 -1.582,1.875 -5.1172,1.875 l -1.3672,0 0,-3.0469 0.957,0 q 2.0508,0 2.793,-0.957 0.7422,-0.9375 0.7422,-3.9258 L 88.6513,539.2204 z m 0,-8.5156 3.5938,0 0,4.5508 -3.5938,0 L 88.6513,530.7048 Z',fill: '#c90088'});
  shapes.push({path:'m 144.8585,529.5563 q 3.1738,1.0742 6.1524,4.5899 3.0273,3.5156 6.0547,9.668 l 10.0098,19.9219 -10.5957,0 -9.3262,-18.7012 q -3.6133,-7.3242 -7.0313,-9.7168 -3.3691,-2.3926 -9.2285,-2.3926 l -10.7422,0 0,30.8105 -9.8633,0 0,-72.9004 22.2656,0 q 12.5,0 18.6523,5.2246 6.1523,5.2246 6.1523,15.7715 0,6.8848 -3.2226,11.4258 Q 150.962,527.7985 144.8584,529.5563 z m -24.707,-30.6152 0,25.8789 12.4023,0 q 7.1289,0 10.7422,-3.2715 3.6621,-3.3203 3.6621,-9.7168 0,-6.3965 -3.6621,-9.6191 -3.6133,-3.2715 -10.7422,-3.2715 L 120.1515,498.9411 Z',fill: '#a2bf2f'});
  shapes.push({path:'m 261.6518,510.6598 0,8.4961 q -3.8086,-1.9531 -7.9101,-2.9297 -4.1015,-0.9766 -8.4961,-0.9766 -6.6894,0 -10.0586,2.0508 -3.3203,2.0508 -3.3203,6.1523 0,3.125 2.3926,4.9316 2.3926,1.7578 9.6191,3.3691 l 3.0762,0.6836 q 9.5703,2.0508 13.5742,5.8106 4.0527,3.7109 4.0527,10.4004 0,7.6172 -6.0547,12.0605 -6.0059,4.4434 -16.5527,4.4434 -4.3945,0 -9.1797,-0.8789 -4.7363,-0.8301 -10.0098,-2.5391 l 0,-9.2773 q 4.9805,2.5879 9.8145,3.9063 4.834,1.2695 9.5703,1.2695 6.3477,0 9.7656,-2.1484 3.418,-2.1973 3.418,-6.1523 0,-3.6621 -2.4902,-5.6152 -2.4414,-1.9531 -10.791,-3.7598 l -3.125,-0.7324 q -8.3496,-1.7578 -12.0605,-5.3711 -3.7109,-3.6621 -3.7109,-10.0098 0,-7.7148 5.4688,-11.9141 5.4688,-4.1993 15.5274,-4.1992 4.9805,0 9.375,0.7324 Q 257.9411,509.1949 261.6521,510.6598 Z',fill: '#a0fff0'});
  shapes.push({path:'m 659.95963,293.28085 0,-62.4662 23.78151,0.18371 c -1.01071,61.49272 93.82963,73.05392 135.34794,48.22763 21.39465,-17.53681 26.4767,-50.46192 7.65143,-68.25353 C 783.17587,179.93194 712.20344,183.60228 674.33194,149.60856 645.894,115.58757 654.01944,68.403147 688.33346,43.878575 750.68165,16.112624 806.63071,27.796208 864.27409,43.416021 l 0,58.424249 -23.36791,0 c -4.5044,-41.043403 -45.45215,-53.094809 -81.7272,-53.337136 -48.73789,4.00185 -86.70692,42.202753 -49.79502,75.567726 45.8982,30.05214 115.79723,26.39806 152.512,60.90447 27.88628,31.7753 13.76265,86.54478 -17.42335,109.31261 C 778.4431,322.17734 720.06796,313.72598 659.95974,293.28066 Z',fill: '#a0ffa0'})
  shapes.push({path:'m 568.6259,522.8354 -27.832,-72.9004 10.3027,0 23.0957,61.377 23.1445,-61.377 10.2539,0 -27.7832,72.9004 L 568.6259,522.8354 Z',fill: '#ffa0a0'});
  shapes.push({path:'m 704.8622,470.2475 0,8.3984 q -3.8086,-2.0996 -7.666,-3.125 -3.8086,-1.0742 -7.7149,-1.0742 -8.7402,0 -13.5742,5.5664 -4.834,5.5176 -4.834,15.5274 0,10.0098 4.834,15.5762 4.834,5.5176 13.5742,5.5176 3.9063,0 7.7149,-1.0254 3.8574,-1.0742 7.666,-3.1738 l 0,8.3008 q -3.7598,1.7578 -7.8125,2.6367 -4.0039,0.8789 -8.5449,0.8789 -12.3535,0 -19.6289,-7.7637 -7.2754,-7.7637 -7.2754,-20.9473 0,-13.3789 7.3242,-21.0449 7.3731,-7.666 20.166,-7.666 4.1504,0 8.1055,0.8789 Q 701.1513,468.5386 704.8622,470.2476 Z',fill: '#a0a0ff'});
  shapes.push({path:'m 726.4716,452.6205 0,15.5274 18.5059,0 0,6.9824 -18.5059,0 0,29.6875 q 0,6.6894 1.8066,8.5938 1.8555,1.9043 7.4707,1.9043 l 9.2285,0 0,7.5195 -9.2285,0 q -10.4004,0 -14.3555,-3.8574 -3.9551,-3.9063 -3.9551,-14.1602 l 0,-29.6875 -6.5918,0 0,-6.9824 6.5918,0 0,-15.5274 L 726.4715,452.6205 Z',fill: '#a0fff0'});
 
  var currentShape=0;
  var oScene = canvas.path();
  oScene.animate(shapes[currentShape], 500, 'linear', animation);
 
  function animation(){
    currentShape++;
    if( currentShape >= shapes.length){
      currentShape=0;
    }
    oScene.animate(shapes[currentShape], 1000, '<>', animation);
  }
})();
</script>
</body>
</html>

Cette librairie est parfaite :)

Je dois juste r�ussir a creer le bon script et la ca va etre chaud.

Changer un certain nombre de carre (path) en cercle (path) dans le document, meme position meme taille meme couleur

Je sais a quoi je vais passer ma semaine haha :)

D.

Une piste ?

Voici ce que j'ai trouv�
http://jsfiddle.net/zeYtT/
C'est cens� �tre une conversion de path "polygone" en cercle :)
Seulement, je ne vois pas ou est le path polygone "d�entr�e". On ne voit que le r�sultat non ?

Je ne comprends pas ce qu'il se passe avec la communaut� Rapha�l sur Google, mais mes messages n'apparaissent m�me pas ...

Merci pour votre aide
D.

Citation:

Envoy� par japower01

C'est cens� �tre une conversion de path "polygone" en cercle :)

Non cette fonction ne fait que dessiner une figure g�om�trique � x ar�tes.

Citation:

Seulement, je ne vois pas ou est le path polygone "d�entr�e". On ne voit que le r�sultat non ?

Pour faire la transition entre un carr� et un octogone il te faut dessiner d'un drawCircle(4) � un drawCircle(8).

Pour passer d'un carr� � un cercle cela pourrait donner
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 32 33 34 35 36 var path, paper, circle, radius; radius = 200; paper = Raphael("canvas", 600, 600); path = drawCircle(4) //can be any number nb = radius/3*2; for(i=4; i<nb;i++){ (function(ind){ setTimeout( function(){ path= drawCircle(ind); }, i*100); })(i); } function drawCircle(nodes){ newPath = []; for(x=0; x<nodes; x++) { deg = (x/nodes)*360; if(x==0) { newPath.push("M " + Math.sin(deg*Math.PI/180)*radius + " " + Math.cos(deg*Math.PI/180)*radius); } else { val = deg*Math.PI/180; newPath.push( "C " + Math.sin(val)*radius + " " + Math.cos(val)*radius + " " + Math.sin(val)*radius + " " + Math.cos(val)*radius + " " + Math.sin(val)*radius + " " + Math.cos(val)*radius ) } } newPath.push("Z") // console.log(newPath) paper.path(newPath).attr({"fill": "#000"}).translate(200, 200) }
M�fies toi quand m�me de ce que l'on trouve sur les outils tel que jsfiddle.net, on ne connait pas la gen�se de la source.

Je d�clines toutes responsabilit�s concernant la qualit� du code ci dessus ;�)