Bonjour,
Pouvez vous me dire si il existent une fonction permettant d'adapté le viewBox a sont contenu?
Dans l'exemple suivant: la rotation du chemin est prévu en paramétrage, le but serai de minimisé la zone rouge quel que soit l'angle paramétré.
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
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
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <header></header>
    <main>
		<table border="10px">
			<tr height="50px">
							<td>
							width:<input id="slide_width" type="range" value="100" min="100" max="300"/>
							</td>
			</tr>
							<td>
							padding:<input id="slide_padding" type="range" value="0" min="0" max="100"/>
							</td>
			<tr>
				<td>
					<table>
						<tr>
							<td>
							<label for="cons">Gauge Consigne</label>
							</td>
						</tr>
						<tr>
							<td>
							<input id="cons" type="number" value="0" min="0" max="360"/>
							</td>
						</tr>
						<tr>
							<td>
							<input id="slide" type="range" value="0" min="0" max="360"/>
							</td>
						</tr>
					</table>
				</td>
				<td id="gauge_svg" width=100px height=200px style="background:lime;">
			</tr>
		</table>
<style>
 
</style>
<script>
class gauge {
        constructor({id = "gauge_svg"}){
                this.id=id
                this.container=document.getElementById(id)
                this.container.innerHTML = /*html*/`
                        <svg class="gauge-container" width="100%" height="100%" viewBox="0 0 100 100">
                        <rect style="fill: red;" width="100%" height="100%"/><!-- Pour visualisation du viewBox-->
                                <g transform="translate(50 50)" transform-origin= "50 50" >
 
                                        <g class="ori">
                                                        <path style="fill:cyan;stroke:blue;stroke-width:1px;"
                                                                d="
                                                                M 40.95760221444959 28.678821817552304
                                                                A 50 50 0 0 0 40.95760221444959 -28.678821817552304
                                                                L 24.574561328669756 -17.20729309053138
                                                                L 0 -10
                                                                L 0 10
                                                                L 24.574561328669756 17.20729309053138
                                                                z
                                                                "/>
                                                <g class="gaugeG"   transform="translate(40 0)" transform-origin= "40 0" >
                                                        <circle class="gauge-bullCons"  cx="0" cy="0" r="10"  fill="#eee" stroke="#ccc" stroke-width="0.1 " ></circle>
                                                        <text class="gauge-cons-text" x="0"  y="0"   stroke-width="0.5"    font-size=" 0.5em"    text-align= "center"   text-anchor= "middle" >
                                                                <tspan class="gauge-consLabel"></tspan>
                                                        </text>
                                                </g>
                                        </g>
                                </g>
                        </svg>
                        `
                this.containerSVG=this.container.querySelector("svg")
                this.bullCons = this.containerSVG.querySelector(".gauge-bullCons")
                this.consLabel = this.containerSVG.querySelector(".gauge-consLabel")
                this.gaugeconstext = this.containerSVG.querySelector(".gauge-cons-text")
                this.gaugeG = this.containerSVG.querySelector(".gaugeG")
                this.ori = this.containerSVG.querySelector(".ori")
 
        }
 
        ctrl(value){
                        this.bullCons.style.transform = `rotate(${value}deg)`
                        this.consLabel.innerHTML=value
                                        this.ori.style.transform = `
                                        rotate(${value}deg)
                        `;
                        this.gaugeconstext.style.transform = `
                                        rotate(${-value}deg)
                                        `;
        }
}
let gauge_di = {};//Dictionnaire des instances
gauge_di[1] = new gauge({id : "gauge_svg"})
 
 window.onload = function () {
                const container = document.querySelector(".gauge-container");
          const bullCons = container.querySelector(".gauge-bullCons");
          const consLabel = container.querySelector(".gauge-consLabel");
          const gaugeconstext = container.querySelector(".gauge-cons-text");
          const gaugeG = container.querySelector(".gaugeG");
          const ori = container.querySelector(".ori");
 
                document.querySelector("#cons").addEventListener("change", event => {
                                        gauge_di[1].ctrl(event.currentTarget.value)
                });
                 document.querySelector("#slide").addEventListener("mousedown", event => {
                                        document.querySelector("#slide").addEventListener("mousemove", event => {
                                        gauge_di[1].ctrl(event.currentTarget.value)
                                        });
                                });
                 document.querySelector("#slide_width").addEventListener("mousedown", event => {
                                        document.querySelector("#slide_width").addEventListener("mousemove", event => {
                                        document.querySelector("#gauge_svg").style.width = `${event.currentTarget.value}px`
                                        document.querySelector("#gauge_svg").style.height = `400-${event.currentTarget.value}px`
                                        });
                                });
                 document.querySelector("#slide_padding").addEventListener("mousedown", event => {
                                        document.querySelector("#slide_padding").addEventListener("mousemove", event => {
                                        document.querySelector("#gauge_svg").style.padding = `${event.currentTarget.value}px ${100-event.currentTarget.value}px`
                                        });
                                });
    }
 
</script>
    </main>
    <footer></footer>
  </body>
</html>