Adaptation javascript pour SVG

**japower01** · 04/12/2013, 15h51

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.

**NoSmoking** · 04/12/2013, 21h43

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

**japower01** · 04/12/2013, 21h49

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 .

**NoSmoking** · 04/12/2013, 22h14

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

**japower01** · 04/12/2013, 22h18

Mes compétences

Est ce qu'il serait pas plus simle (pour moi) de lui mettre l'URL du fichier quelque part ?

**NoSmoking** · 05/12/2013, 18h56

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é.

**japower01** · 05/12/2013, 19h29

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 ...

**NoSmoking** · 05/12/2013, 21h58

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

**japower01** · 05/12/2013, 22h48

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

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
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>

**japower01** · 10/12/2013, 16h48

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 ?

**NoSmoking** · 10/12/2013, 19h49

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

**japower01** · 10/12/2013, 21h25

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é

**NoSmoking** · 11/12/2013, 18h41

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 :

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

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.

**japower01** · 11/12/2013, 19h52

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.

**NoSmoking** · 11/12/2013, 22h23

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 html :

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
<!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>

**japower01** · 11/12/2013, 22h58

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.

**japower01** · 15/12/2013, 18h46

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.

**NoSmoking** · 15/12/2013, 20h12

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.

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 :

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
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 ;°)

Adaptation javascript pour SVG

JavaScript

Discussions similaires

Partager

Partager