-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex-exemplo6-SVG.html
72 lines (68 loc) · 2.74 KB
/
index-exemplo6-SVG.html
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
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>SVG</title>
</head>
<body>
<svg width="500" height="200">
<rect width="520" height="20" stroke="#999999" stroke-width="1" fill="white" y="0" x="-10" />
<rect width="520" height="20" stroke="#999999" stroke-width="1" fill="white" y="40" x="-10" />
<rect width="520" height="20" stroke="#999999" stroke-width="1" fill="white" y="80" x="-10" />
<rect width="520" height="20" stroke="#999999" stroke-width="1" fill="white" y="120" x="-10" />
<rect width="520" height="20" stroke="#999999" stroke-width="1" fill="white" y="160" x="-10" />
<line id="l0" x1="25" y1="0" x2="100" y2="0" stroke-width="6" stroke="red" />
<line id="l1" x1="100" y1="0" x2="175" y2="0" stroke-width="6" stroke="red" />
<line id="l2" x1="175" y1="0" x2="250" y2="0" stroke-width="6" stroke="red" />
</svg>
<br />
<svg width="500" height="200">
<rect width="520" height="20" stroke="#999999" stroke-width="1" fill="white" y="0" x="-10" />
<rect width="520" height="20" stroke="#999999" stroke-width="1" fill="white" y="40" x="-10" />
<rect width="520" height="20" stroke="#999999" stroke-width="1" fill="white" y="80" x="-10" />
<rect width="520" height="20" stroke="#999999" stroke-width="1" fill="white" y="120" x="-10" />
<rect width="520" height="20" stroke="#999999" stroke-width="1" fill="white" y="160" x="-10" />
<rect id="v0" width="50" x="25" y="0" height="200" fill="red" />
<rect id="v1" width="50" x="100" y="0" height="200" fill="green" />
<rect id="v2" width="50" x="175" y="0" height="200" fill="blue" />
<rect id="v3" width="50" x="250" y="0" height="200" fill="silver" />
</svg>
<br />
<svg width="500" height="500">
<rect width="300" height="200" fill="red" stroke="black" stroke-width="10" x="20" y="40" />
<circle r="40" fill="yellow" cx="150" cy="150" />
<line x1="10" y1="400" x2="490" y2="100" stroke="green" stroke-width="30" />
</svg>
<script>
valoresAtuais=[200,200,200,200]
valoresAlvo=[200,200,200,200]
function passoAnimacao(){
for(var i=0;i<valoresAtuais.length;i++){
if(valoresAtuais[i]<valoresAlvo[i]){
valoresAtuais[i]++
}
if(valoresAtuais[i]>valoresAlvo[i]){
valoresAtuais[i]--
}
atualizaGrafico(valoresAtuais)
}
}
function atualizaGrafico(valores){
for(var i=0;i<valores.length;i++){
var barra=document.querySelector('#v'+i)
barra.setAttribute('height',valores[i])
barra.setAttribute('y',200-valores[i])
var linha1=document.querySelector('#l'+(i-1))
var linha2=document.querySelector('#l'+i)
if(linha1){
linha1.setAttribute('y2',200-valores[i])
}
if(linha2){
linha2.setAttribute('y1',200-valores[i])
}
}
}
setInterval(passoAnimacao,10)
</script>
</body>
</html>