Animation SVG & JS

Bonjour à tous, je souhaiterais faire un histogramme en svg généré à partir d'un tableau de valeurs.

voilà ce que je veux faire en gros pour une barre de l'histogramme :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800">
 
	<defs id="defs">
		<animate xlink:href="#poly_test" attributeName="points" attributeType="XML" from="100,500 150,500 170,480 120,480" to="100,400 150,400 170,380 120,380" begin="0s" dur="3s" fill="freeze" ></animate>
		<animate xlink:href="#poly_tes" attributeName="points" attributeType="XML" from="100,500 150,500 150,500 100,500" to="100,500 150,500 150,400 100,400" begin="0s" dur="3s" fill="freeze" ></animate>
		<animate xlink:href="#poly_tesse" attributeName="points" attributeType="XML" from="150,500 170,480 170,480 150,500" to="150,500 170,480 170,380 150,400" begin="0s" dur="3s" fill="freeze" ></animate>
 
	</defs>
	<g id="histo">
		<polygon id="poly_test" points="100,500 150,500 170,480 120,480" fill="#cc0022" stroke="black"></polygon>
		<polygon id="poly_tes" points="100,500 150,500 150,500 100,500" fill="#cc0022" stroke="black" ></polygon>
		<polygon id="poly_tesse" points="150,500 170,480 170,480 150,500" fill="#cc0022" stroke="black"></polygon>
	</g>
 
</svg>
</body>
</html>

la taille du tableau est variable, les données dedans aussi !
donc je veux générer un nombre de barre variable.

voilà donc à quoi ressemble mon code pour la génération du svg :

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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<script type="text/javascript">
	var svgns = "http://www.w3.org/2000/svg";
 
	var proportion = new Array(5, 6, 0, 9, 5, 10, 11, 4, 8, 5 ); // la tableau variable
	var x = 50;
	var y = 500;
	var taille = 50;
 
	var colors = ["#cc0022","#c38ec7","#ffff00","#00FF22","#0099cc","#9966cc","#660055","#660011","#c48189","#ee9a4d","#5efb6e","#95b9c7","#717d7d","#cc6622","#666362"];
 
	function loadHisto(svgns, proportion){
		var g = document.createElementNS(svgns, 'g');
		g.setAttribute('id', 'histo');
		//for (var i = 0; i < proportion.length; ++i){
			var newPoints = x*0 + 0*taille + ',' + y + ' ' + (x*0 + 0*taille + taille) + ',' + y + ' ' + (x*0 + 0*taille + taille + 20) + ',' + (y - 20) + ' ' + (x*0 + 0*taille + 20) + ',' + (y - 20);
 
			var polygon = document.createElementNS(svgns, 'polygon');
			polygon.setAttribute('points', newPoints);
			polygon.setAttribute('fill', colors[0]);
			polygon.setAttribute('id', 'poly_'+0);
			g.appendChild(polygon);
		//}
		document.getElementById('svg').appendChild(g);
 
		//for (var i = 0; i < proportion.length; ++i){
			var newPoints1 = x*0 + 0*taille + ',' + (y - 100) + ' ' + (x*0 + 0*taille + taille) + ',' + (y - 100) + ' ' + (x*0 + 0*taille + taille + 20) + ',' + (y - 120) + ' ' + (x*0 + 0*taille + 20) + ',' + (y - 120); 
 
			var anim = document.createElementNS(svgns, 'animate');
			anim.setAttribute('attributeName', 'points');
			anim.setAttribute('attributeType', 'XML');
			anim.setAttribute('from', document.getElementById('poly_'+0).getAttribute('points'));
			anim.setAttribute('to', newPoints1);
			anim.setAttribute('begin', '0s');
			anim.setAttribute('dur', '3s');
			anim.setAttribute('fill', 'freeze');
			anim.setAttribute('xlink:href', '#poly_'+0);
		//}
		document.getElementById('defs').appendChild(anim);
	}
 
	function loadChart(){
 
		var svg = document.createElementNS(svgns, 'svg');
		svg.setAttribute('id', 'svg');
		svg.setAttribute('width', '100%');
		svg.setAttribute('height', 800);
		svg.setAttribute('x', 0);
		svg.setAttribute('y', 0);
		svg.setAttribute('viewBox', '0 0 1000 800');
		svg.setAttribute('style', 'border:solid 1px black')
		//svg.setAttribute('preserveAspectRatio', 'xMidYMid Slice');
		document.getElementById('histoChart').appendChild(svg);
 
		var defs = document.createElementNS(svgns, 'defs');
		defs.setAttribute('id', 'defs');
		document.getElementById('svg').appendChild(defs);
 
		loadHisto(svgns, proportion);
	}	
 
</script>
<body onload="loadChart();">
	<div id="histoChart">
	</div>
</body>
</html>

ce qui représente quasiment la meme chose qu'au dessus avec juste un seul polygon, celui du dessus !

le problème est que une fois la balise d'animation ajoutée, l'animation ne se lance pas !

je me demande si c'est du au fait que l'animation doit démarrer une fois le chargement du svg effectué hors la le svg est généré et peut etre que le navigateur considère que le svg est déjà chargé ? une modification du svg avec l'ajout de l'animation ne fait pas rechargé le svg donc l'animation ne démarre pas. ca pourrait etre une explication.
(mais ca ne m'arrangerait pas trop -_-")

si ce n'est pas ca avez vous une idée d'ou ca vient ? et comment je pourrais régler mon problème ?

sinon si il n'y a pas de solution ou ce n'est pas la bonne méthode merci de me le précisez ^^ et avez vous d'autres idées de comment je peux atteindre ce résultat ?

sinon je tenterais un truc avec jquery et raphael mais je préfèrerais réussir avec ca !

merci de votre aide