thermometer.svg
6 KB
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
<svg class="flowmeter-thermometer" viewBox="0 0 200 250" xmlns="http://www.w3.org/2000/svg"
style="--range: 4; --min: 50; --max: 70; --width: 500; --height: 500; --value: 50;">
<style>
.flowmeter-thermometer {
width: calc(min(var(--width), var(--height)) * 1px);
height: calc(min(var(--width), var(--height)) * 1px);
}
.thermometer-mercury-column {
y: var(--value);
}
.tick-label {
font-size: 12px;
text-align: right;
overflow: hidden;
text-overflow: ellipsis;
color: #5b6b73;
}
.thermometer-mercury-column {
transition: y .5s cubic-bezier(0.19, 1, 0.22, 1);
}
</style>
<defs>
<radialGradient id="thermometerdiv_meter_2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color: rgb(230, 200, 200);"></stop>
<stop offset="90%" style="stop-color: rgb(230, 0, 0);"></stop>
</radialGradient>
<clipPath id="over">
<rect width="100" height="190" x="100" y="10" />
</clipPath>
</defs>
<circle r="9.25" cx="109" cy="14.25" style="fill: rgb(255, 255, 255); stroke: rgb(136, 136, 136); stroke-width: 1px;">
</circle>
<rect x="99.75" y="14.25" height="192.75" width="18.5"
style="shape-rendering: crispedges; fill: rgb(255, 255, 255); stroke: rgb(136, 136, 136); stroke-width: 1px;">
</rect>
<circle r="8.75" cx="109" cy="14.25" style="fill: rgb(255, 255, 255); stroke: none;"></circle>
<circle r="18" cx="109" cy="207" style="fill: rgb(255, 255, 255); stroke: rgb(136, 136, 136);"></circle>
<rect x="100.25" y="14.25" height="192.75" width="17.5"
style="shape-rendering: crispedges; fill: rgb(255, 255, 255); stroke: none;"></rect>
<line class="thermometer-min-line" x1="99.75" x2="140.25" y1="165" y2="165"
style="stroke: rgb(136, 136, 136); stroke-width: 1px; shape-rendering: crispedges;"></line>
<text class="thermometer-min-label" x="120.25" y="168.46428571428572" dy="0.72em"
style="fill: rgb(0, 0, 230); font-size: 10px;">min</text>
<line class="thermometer-max-line" x1="99.75" x2="140.25" y1="40" y2="40"
style="stroke: rgb(136, 136, 136); stroke-width: 1px; shape-rendering: crispedges;"></line>
<text class="thermometer-max-label" x="120.25" y="35.285714285714306"
style="fill: rgb(230, 0, 0); font-size: 10px;">max</text>
<rect class="thermometer-mercury-column" x="104" y="15" width="10.5" height="190"
style="shape-rendering: crispedges; fill: rgb(230, 0, 0);" clip-path="url(#over)"></rect>
<circle r="13" cx="109" cy="207"
style="fill: url("#thermometerdiv_meter_2"); stroke: rgb(230, 0, 0); stroke-width: 2px;"></circle>
<foreignObject>
<div></div>
</foreignObject>
<g class="thermometer-temperature-axis" transform="translate(99.75,0)" fill="none" font-size="10"
font-family="sans-serif" text-anchor="end">
<g class="tick" opacity="1" transform="translate(0,190)">
<line stroke="currentColor" x2="-7"
style="stroke: rgb(136, 136, 136); shape-rendering: crispedges; stroke-width: 1px;"></line>
<foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
<div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">-20</div>
</foreignObject>
</g>
<g class="tick" opacity="1" transform="translate(0,165)">
<line stroke="currentColor" x2="-7"
style="stroke: rgb(136, 136, 136); shape-rendering: crispedges; stroke-width: 1px;"></line>
<foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
<div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">0</div>
</foreignObject>
</g>
<g class="tick" opacity="1" transform="translate(0,140)">
<line stroke="currentColor" x2="-7"
style="stroke: rgb(136, 136, 136); shape-rendering: crispedges; stroke-width: 1px;"></line>
<foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
<div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">20</div>
</foreignObject>
</g>
<g class="tick" opacity="1" transform="translate(0,115)">
<line stroke="currentColor" x2="-7"
style="stroke: rgb(136, 136, 136); shape-rendering: crispedges; stroke-width: 1px;"></line>
<foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
<div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">40</div>
</foreignObject>
</g>
<g class="tick" opacity="1" transform="translate(0,90)">
<line stroke="currentColor" x2="-7"
style="stroke: rgb(136, 136, 136); shape-rendering: crispedges; stroke-width: 1px;"></line>
<foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
<div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">60</div>
</foreignObject>
</g>
<g class="tick" opacity="1" transform="translate(0,65)">
<line stroke="currentColor" x2="-7"
style="stroke: rgb(136, 136, 136); shape-rendering: crispedges; stroke-width: 1px;"></line>
<foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
<div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">80</div>
</foreignObject>
</g>
<g class="tick" opacity="1" transform="translate(0,40)">
<line stroke="currentColor" x2="-7"
style="stroke: rgb(136, 136, 136); shape-rendering: crispedges; stroke-width: 1px;"></line>
<foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
<div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">100</div>
</foreignObject>
</g>
<g class="tick" opacity="1" transform="translate(0,15)">
<line stroke="currentColor" x2="-7"
style="stroke: rgb(136, 136, 136); shape-rendering: crispedges; stroke-width: 1px;"></line>
<foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
<div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">120</div>
</foreignObject>
</g>
</g>
</svg>