Tracé dynamique et SVG+JS

[ababdge]

Bonjour,

je veux que mon SVG se génère au fur et à mesure, voir le décomposé des tracés pour ça j'ajoute du javascript à mon SVG.
Je commence par tracé un rectangle que je décompose en 4 segment que je veux tracé progressivement, voici le code pour les 3 premiers segments.

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
  /*1*/
  newLine1 = document.createElementNS(svgNS, 'line');
  newLine1.setAttributeNS(null, 'class', "workingLines");
  newLine1.setAttributeNS(null, 'x1', x1+5);
  newLine1.setAttributeNS(null, 'y1', y1-5);
  newLine1.setAttributeNS(null, 'x2', x1+5);
  newLine1.setAttributeNS(null, 'y2', y1-5-55);
 
  newAnim1 = document.createElementNS(svgNS, 'animate');
  newAnim1.setAttributeNS(null, "attributeName", "y2");
  newAnim1.setAttributeNS(null, "dur", "3s");
  newAnim1.setAttributeNS(null, "from", "" + y1 - 5);
  newAnim1.setAttributeNS(null, "to", "" + y1 - 5 - 55);
 	newLine1.appendChild(newAnim1);
 
	document.rootElement.appendChild(newLine1);
 
  /*2*/
  newLine2 = document.createElementNS(svgNS, 'line');
  newLine2.setAttributeNS(null, 'class', "workingLines");
  newLine2.setAttributeNS(null, 'x1', x1+5);
  newLine2.setAttributeNS(null, 'y1', y1-5-55);
  newLine2.setAttributeNS(null, 'x2', x1+5);
  newLine2.setAttributeNS(null, 'y2', y1-5-55);
 
  newAnim2 = document.createElementNS(svgNS, 'animate');
  newAnim2.setAttributeNS(null, "attributeName", "x2");
  newAnim2.setAttributeNS(null, "begin", newAnim1.end);
  newAnim2.setAttributeNS(null, "dur", "3s");
  newAnim2.setAttributeNS(null, "from", "" + x1 + 5);
  newAnim2.setAttributeNS(null, "to", "" + x1 + 5 + 78);
 	newLine2.appendChild(newAnim2);
 
	document.rootElement.appendChild(newLine2);
 
  /*3*/
  newLine3 = document.createElementNS(svgNS, 'line');
  newLine3.setAttributeNS(null, 'class', "workingLines");
  newLine3.setAttributeNS(null, 'x1', x1+5+78);
  newLine3.setAttributeNS(null, 'y1', y1-5-55);
  newLine3.setAttributeNS(null, 'x2', x1+5+78);
  newLine3.setAttributeNS(null, 'y2', y1-5);
 
  newAnim3 = document.createElementNS(svgNS, 'animate');
  newAnim3.setAttributeNS(null, "attributeName", "y2");
  newAnim3.setAttributeNS(null, "begin", newAnim2.end);
  newAnim3.setAttributeNS(null, "dur", "3s");
  newAnim3.setAttributeNS(null, "from", "" + y1 - 5 - 55);
  newAnim3.setAttributeNS(null, "to", "" + y1 - 5);
 	newLine3.appendChild(newAnim3);
 
	document.rootElement.appendChild(newLine3);

Malheureusement ça ne produit pas le résultat escompté... Le premier segment newLine1 et son anim associée, OK tout va bien, je vois le tracé se faire. Par contre, alors que je pensais animer le 2ème segment dans la continuité temporelle du premier grâce au "begin" newAnim1.end, en fait les segement 2 et 3 apparaissent entier, sans animation à t0, alors que l'animation du segment 1 se lance. Une idée ?

Merci

[tsuji]

Vous devriez [1] ajouter un attribut id pour NewAnim1 et puis [2] le réferer dans NewAnim2... ainsi de suite.

Code :

1
2
3
4
5
6
7
8
9
10
/*1*/
//...etc etc...
newAnim1 = document.createElementNS(svgNS, 'animate');
newAnim1.setAttribute("id", "an1");
//...etc etc...
 
/*2*/
//...etc etc...
newAnim2.setAttributeNS(null, "begin", newAnim1.getAttribute("id")+".end");
//...etc etc...