Animation SVG & JS

**taggik-majin** · 21/05/2012, 15h47

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

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

**taggik-majin** · 22/05/2012, 11h38

Bon avec beginElement() qui permet de lancer une anim je devrais m'en sortir !

ca donne un truc comme ca

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
 
// Dans le fonction loadChart()
var anim = document.createElementNS(svgns, 'animate');
anim.setAttribute('attributeName', 'points');
anim.setAttribute('attributeType', 'XML');
anim.setAttribute('id', 'anim');
anim.setAttribute('begin', 'indefinite');
anim.setAttribute('fill', 'freeze');
 
document.getElementById('defs').appendChild(anim);
 
// Dans la fonction loadHisto(svgns, proportion)
 
for (var i = 0; i < proportion.length; ++i){
	var newPoints = x*i + i*taille + ',' + y + ' ' + (x*i + i*taille + taille) + ',' + y + ' ' + (x*i + i*taille + taille + 20) + ',' + (y - 20) + ' ' + (x*i + i*taille + 20) + ',' + (y - 20);
 
	var polygon = document.createElementNS(svgns, 'polygon');
	polygon.setAttribute('points', newPoints);
	polygon.setAttribute('fill', colors[i]);
	polygon.setAttribute('id', 'poly_'+i);
	g.appendChild(polygon);
}
document.getElementById('svg').appendChild(g);
 
var template_animations = document.getElementById('defs').getElementsByTagNameNS('http://www.w3.org/2000/svg', '*');
 
var animations = new Array();
for (var i = 0; i < proportion.length; ++i){
	var animation = template_animations.item(0).cloneNode(false);
	var target = document.getElementById('poly_'+j);
	animations.push(target.appendChild(animation));
 
	var newPoints1 = x*i + i*taille + ',' + (y - 100) + ' ' + (x*i + i*taille + taille) + ',' + (y - 100) + ' ' + (x*i + i*taille + taille + 20) + ',' + (y - 120) + ' ' + (x*i + i*taille + 20) + ',' + (y - 120); 
 
	animations[i].setAttribute('from', document.getElementById('poly_'+i).getAttribute('points'));
	animations[i].setAttribute('to', newPoints1);
	animations[i].setAttribute('dur','3s');
 
	animations[i].beginElement();
}

solution d'apres ce site.

par contre dans mes tests, je me suis apercu que si je veux pas appendChild l'animation aux polygons mais utiliser un xlink vers l'id du polygon ca ne fonctionne pas !

dans le cas ci-dessus je n'en ai pas besoin mais bon ca m'interesserais de savoir pourquoi ca chie.
Si quelqu'un a une idée je suis preneur !

Animation SVG & JS

JavaScript

Discussions similaires

Partager

Partager