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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
| <!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title></title>
<style>
.Couleur_marcheVert {
border-color : lime;
background: linear-gradient(to bottom,
lime 0%,
palegreen 20%,
lime 35%,
palegreen 100%);
color: white;
}
.Couleur_arret {
background: linear-gradient(to bottom,
black 0%,
dimgrey 20%,
black 35%,
dimgrey 100%);
color: white;
}
</style>
</head>
<body>
<header></header>
<main>
<table border="10px">
<tr>
<td>
<div id="GenBp_1"/>
</td>
<td>
<div id="GenBp_2"/>
</td>
</tr>
<tr>
<td colspan=2>
<div id="testanime" width="50px" height="50px"/>
</td>
</tr>
</table>
<style>
.line {
stroke: #bfbfbf;
stroke-width: 1;
fill: none;
}
.gauge-ring {
stroke: #EBEBEB;
}
</style>
<script>
class test {
constructor(id){
this.id=id
this.container=document.getElementById(id)
this.container.innerHTML = /*html*/`
<svg class="test_container" width="100px" height="100px" viewBox="0 0 100 100">
<circle class="cercle" cx="50" cy="50" r="40" fill="transparent" stroke="blue" stroke-width="3.5">
</circle>
</svg>
`
/*
<animate
attributeName="r"
from="10"
to="100"
dur="3s"
begin="0s"
end="indefinite"
repeatCount="indefinite"/>
*/
this.containerSVG=this.container.querySelector("svg")
this.cercle = this.containerSVG.querySelector(".cercle")
// this.anime = this.cercle.querySelector("animate")
// this.anime = this.containerSVG.querySelector("animate")
this.anime = document.createElementNS("http://www.w3.org/2000/svg", "animate")
this.anime.setAttribute("attributeName", "r")
this.anime.setAttribute("from", "10")
this.anime.setAttribute("to", "100")
this.anime.setAttribute("dur", "3s")
this.anime.setAttribute("beguin", "indefinite")
this.anime.setAttribute("end", "indefinite")
this.anime.setAttribute("repeatCount", "indefinite")
this.cercle.insertAdjacentElement('beforeend',this.anime);
}
start(){
console.log('start')
this.anime.beginElement()
}
stop(){
console.log('stop')
this.anime.endElement()
}
}
class GenBp{
constructor({id, etiq , fonct}={}){
this.etat_bp=false;
this.fonct=fonct
this.idcont=document.getElementById(id);
this.idcont.classList.add('GenBp');
this.conteneurBp = document.createElement('button');
this.idcont.appendChild(this.conteneurBp);
this.conteneurBp.classList.add('GenBp_Bp');
this.conteneurBp.innerHTML = etiq;
this.conteneurBp.addEventListener("click", () => {this.ctrl(this.etat_bp)});
this.conteneurBp.classList.add('GenBp_cadre_vert');
this.coulBP_maj=null;
this.coulBP_aff=null;
this.ctrl(false);
}
ctrl(val){
if (val){
this.coulBP_maj="Couleur_marcheVert";
}
else {
this.coulBP_maj="Couleur_arret";
}
this.conteneurBp.classList.remove(this.coulBP_aff);
this.conteneurBp.classList.add(this.coulBP_maj);
this.coulBP_aff=this.coulBP_maj;
this.etat_bp=!this.etat_bp;
this.fonct()
}
etat(){
return this.etat_bp
}
}
let test_di = {};//Dictionnaire des instances
test_di[1] = new test("testanime")
let GenBp_1 = new GenBp({id:'GenBp_1',etiq: 'Marche',fonct:test_di[1].start});
let GenBp_2 = new GenBp({id:'GenBp_2',etiq: 'Arret',fonct:test_di[1].stop});
</script>
</main>
<footer></footer>
</body>
</html> |
[SVG] Activer/désactiver une animation
Répondre avec citation
Envoyé par alexis_c
Partager