Tracé dynamique et SVG+JS

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