我正在使用量规.指针没有正确旋转.它的工作原理就像第一个旋转Angular 是30度,然后指针转到30度,然后下一个值是50,然后从30度开始,然后转到30+50=80,等等.没有得到精确的Angular .我有固定的中心点和中心点.我的源代码在这里..

 <script
      src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.1.2/svg.min.js"
      integrity="sha512-I+rKw3hArzZIHzrkdELbKqrXfkSvw/h0lW/GgB8FThaBVz2e5ZUlSW8kY8v3q6wq37eybIwyufkEZxe4qSlGcg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>

java脚本代码:

var guagec = $("#centreGuage");

var offset = guagec.offset();
var width = guagec.width();
var height = guagec.height();

var centerX = offset.left + width / 2;
var centerY = offset.top + height / 2;
var timers = [];
var interval = setInterval(function () {
var divElem1 = document.querySelector("#needle");

var element = SVG(divElem1);
var max = 100;
var min = 0;
var value = Math.random() * 100;
var maxAngle = 320;
var minAngle = 10;
var total = max - min;
var angleval = maxAngle / 100;
var angle = (((value - min) * 100) / total) * angleval;

element.animate(500).rotate(angle, centerX, centerY);

 }, 1000);

我的svg代码

 <svg viewBox="0 0 500 500" class="gauge" version="1.1" xmlns="http://www.w3.org/2000/svg" >
    
    <g id="xcustom3" fill="url(#_GradLFF02X02X02XF002X02X02X0NA_)" fill-opacity="1" fill-rule="evenodd" stroke="rgb(0,0,0)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10">
    <rect id="centreGuage" data-type="needle_centre" x="66" y="210" rx="20" ry="20" width="197" height="197" stroke="rgb(240,240,240)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(240,240,240)" fill-opacity="1" fill-rule="evenodd"></rect>
    <polygon points="195 365 191 367 194 372 198 370 " stroke="rgb(71,71,71)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(218,48,160)" fill-opacity="1" fill-rule="evenodd"></polygon>
    <polygon points="144 367 140 366 136 377 140 378 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
    <polygon points="115 348 113 344 104 352 106 355 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
    <polygon points="102 316 101 312 89 313 90 317 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
    <polygon points="106 282 108 278 97 273 96 277 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
    <polygon points="129 256 132 253 126 243 122 245 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
    <polygon points="162 246 166 246 166 234 162 234 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
    <polygon points="195 253 198 256 205 245 201 243 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
    <polygon points="219 278 221 282 231 277 230 273 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
    <polygon points="226 312 225 316 237 317 238 313 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
    <polygon points="214 344 212 348 221 355 223 352 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
    <polygon points="187 366 183 367 187 378 191 377 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
    <polygon points="144 367 140 366 136 377 140 378 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
    <polygon points="115 348 113 344 104 352 106 355 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
    <polygon points="102 316 101 312 89 313 90 317 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
    <polygon points="106 282 108 278 97 273 96 277 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
    <polygon points="129 256 132 253 126 243 122 245 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
    <polygon points="162 246 166 246 166 234 162 234 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
    <polygon points="195 253 198 256 205 245 201 243 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
    <polygon points="219 278 221 282 231 277 230 273 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
    <polygon points="226 312 225 316 237 317 238 313 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
    <polygon points="214 344 212 348 221 355 223 352 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
    <polygon points="187 366 183 367 187 378 191 377 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
    <g fill="rgb(240,240,240)" fill-opacity="1" fill-rule="evenodd" stroke="none" font-family="Arial" font-size="14.00pt" font-weight="bold" text-anchor="start" xml:space="preserve">
    <text x="71" y="319">20</text>
    </g>
    <g fill="rgb(71,71,71)" fill-opacity="1" fill-rule="evenodd" stroke="none" font-family="Arial" font-size="14.00pt" font-weight="bold" text-anchor="start" xml:space="preserve">
    <text x="124" y="391">0</text>
    </g>
    <g fill="rgb(71,71,71)" fill-opacity="1" fill-rule="evenodd" stroke="none" font-family="Arial" font-size="14.00pt" font-weight="bold" text-anchor="start" xml:space="preserve">
    <text x="88" y="362">10</text>
    </g>
    <g fill="rgb(71,71,71)" fill-opacity="1" fill-rule="evenodd" stroke="none" font-family="Arial" font-size="14.00pt" font-weight="bold" text-anchor="start" xml:space="preserve">
    <text x="71" y="319">20</text>
    </g>
    <g fill="rgb(71,71,71)" fill-opacity="1" fill-rule="evenodd" stroke="none" font-family="Arial" font-size="14.00pt" font-weight="bold" text-anchor="start" xml:space="preserve">
    <text x="80" y="275">30</text>
    </g>
    <g fill="rgb(71,71,71)" fill-opacity="1" fill-rule="evenodd" stroke="none" font-family="Arial" font-size="14.00pt" font-weight="bold" text-anchor="start" xml:space="preserve">
    <text x="110" y="241">40</text>
    </g>
    <g fill="rgb(71,71,71)" fill-opacity="1" fill-rule="evenodd" stroke="none" font-family="Arial" font-size="14.00pt" font-weight="bold" text-anchor="start" xml:space="preserve">
    <text x="154" y="229">50</text>
    </g>
    <g fill="rgb(71,71,71)" fill-opacity="1" fill-rule="evenodd" stroke="none" font-family="Arial" font-size="14.00pt" font-weight="bold" text-anchor="start" xml:space="preserve">
    <text x="198" y="240">60</text>
    </g>
    <g fill="rgb(71,71,71)" fill-opacity="1" fill-rule="evenodd" stroke="none" font-family="Arial" font-size="14.00pt" font-weight="bold" text-anchor="start" xml:space="preserve">
    <text x="230" y="273">70</text>
    </g>
    <g fill="rgb(71,71,71)" fill-opacity="1" fill-rule="evenodd" stroke="none" font-family="Arial" font-size="14.00pt" font-weight="bold" text-anchor="start" xml:space="preserve">
    <text x="240" y="319">80</text>
    </g>
    <g fill="rgb(71,71,71)" fill-opacity="1" fill-rule="evenodd" stroke="none" font-family="Arial" font-size="14.00pt" font-weight="bold" text-anchor="start" xml:space="preserve">
    <text x="222" y="364">90</text>
    </g>
    <g fill="rgb(71,71,71)" fill-opacity="1" fill-rule="evenodd" stroke="none" font-family="Arial" font-size="14.00pt" font-weight="bold" text-anchor="start" xml:space="preserve">
    <text x="183" y="392">100</text>
    </g>
    <rect x="130" y="359" width="70" height="24" stroke="rgb(255,232,167)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,232,167)" fill-opacity="1" fill-rule="evenodd"></rect>
    <g fill="rgb(240,240,240)" fill-opacity="1" fill-rule="evenodd" stroke="none" font-family="Arial" font-size="20.00pt" font-weight="bold" text-anchor="middle" xml:space="preserve">
    <text x="166" y="380">0</text>
    </g>
    <g fill="rgb(21,21,21)" fill-opacity="1" fill-rule="evenodd" stroke="none" font-family="Arial" font-size="20.00pt" font-weight="bold" text-anchor="middle" xml:space="preserve">
    <text id="GaugeValue" x="165" y="379">29.02</text>
    </g>
    
    <g id="needle" transform="matrix(0.4483150139761999,-0.8938756335438865,0.8938756335438865,0.44831501397620044,-185.00845274737446,317.2373599063141)">
      <polygon points="145 355 161 324 152 322 145 355 " stroke="rgb(105,105,105)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(160,160,160)" fill-opacity="1" fill-rule="evenodd"></polygon>
    <polygon points="146 356 162 325 153 323 146 356 " stroke="rgb(105,105,105)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(160,160,160)" fill-opacity="1" fill-rule="evenodd"></polygon>
    
    </g>
    
    <g fill="rgb(0,0,196)" fill-opacity="1" fill-rule="evenodd" stroke="none" font-family="Tahoma" font-size="9.00pt" text-anchor="middle" tag-labal="used-tag=">
    <text id="text_280530371" x="164" y="311">Knob</text>
    </g>
    </g>
    <defs>
    <radialGradient id="_GradLFF02X02X02XF002X02X02X0NA_" gradientUnits="objectBoundingBox" fx="0.50" fy="0.50">
      <stop offset="0.000" stop-color="rgb(240,240,240)" stop-opacity="1.0"></stop>
      <stop offset="1.000" stop-color="rgb(255,206,160)" stop-opacity="1.0"></stop>
    </radialGradient>
    </defs>
    
    </svg>

推荐答案

您需要通过getBBox()计算中心X/Y(枢轴)点.

.offset()将返回渲染宽度.

工作示例

        var svg = document.querySelector('svg');
        var guagec = $("#centreGuage");
        var needle = document.querySelector("#needle");
        var gaugeValue = document.getElementById("GaugeValue");

        var bb = guagec[0].getBBox();
        var [x, y, width, height] = [bb.x, bb.y, bb.width, bb.height];
        var [centerX, centerY] = [x + width / 2, y + height / 2];
        //set initial position
        needle.setAttribute('style', `transform: translate(${centerX}px, ${centerY}px) rotate(0deg) translate(-${centerX}px, -${centerY}px)`);

        var timers = [];
        var interval = setInterval(function () {
            var max = 100;
            var min = 0;
            var value = Math.random() * (max - min) + min;
            var maxAngle = 320;
            var minAngle = 10;
            var total = max - min;
            var angleval = maxAngle / 100;
            var angle = (((value - min) * 100) / total) * angleval;
            gaugeValue.textContent = +value.toFixed(2);
            needle.setAttribute('style', `transform: translate(${centerX}px, ${centerY}px) rotate(${angle}deg) translate(-${centerX}px, -${centerY}px)`);
        }, 1000);
svg{
width:50%;
}

#needle{transition: 0.5s}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<svg viewBox="66 210 197 197">
        <g class="gauge" id="xcustom3" fill="url(#GradLFF02X02X02XF002X02X02X0NA)" stroke="rgb(0,0,0)"
            stroke-width="1" stroke-miterlimit="10">
            <rect id="centreGuage"  x="66" y="210" rx="20" ry="20" width="197" height="197" stroke="rgb(240,240,240)" fill="rgb(240,240,240)" />
            <polygon
                points="220 319 220 318 220 317 220 316 220 316 220 315 221 314 221 313 221 313 221 312 221 311 221 310 221 309 221 309 221 308 221 307 209 307 209 308 209 308 209 309 209 310 209 310 209 311 209 312 209 312 209 313 209 314 208 314 208 315 208 315 208 316 208 317 220 319"
                stroke="rgb(72,72,72)" fill="rgb(72,72,72)" />
            <polygon
                points="216 331 216 330 217 329 217 328 217 327 218 327 218 326 218 325 218 324 219 324 219 323 219 322 219 321 219 320 220 320 220 319 208 317 208 317 208 318 208 319 207 319 207 320 207 320 207 321 207 322 206 322 206 323 206 323 206 324 206 324 205 325 205 326 216 331"
                stroke="rgb(54,54,54)" fill="rgb(54,54,54)" />
            <polygon
                points="210 341 210 341 211 340 211 339 212 338 212 338 213 337 213 336 213 336 214 335 214 334 215 334 215 333 215 332 216 331 216 331 205 326 205 326 205 327 204 327 204 328 204 329 203 329 203 330 203 330 202 331 202 332 202 332 201 333 201 333 200 334 200 334 210 341"
                stroke="rgb(36,36,36)" fill="rgb(36,36,36)" />
            <polygon
                points="202 350 203 349 203 349 204 348 204 348 205 347 205 347 206 346 206 345 207 345 207 344 208 344 208 343 209 342 209 342 210 341 200 334 200 335 199 335 199 336 199 336 198 337 198 337 197 338 197 338 197 338 196 339 196 339 195 340 195 340 194 341 194 341 202 350"
                stroke="rgb(18,18,18)" fill="rgb(18,18,18)" />
            <polygon
                points="192 357 192 357 193 357 194 356 195 356 195 355 196 355 197 354 197 354 198 353 199 353 199 352 200 352 201 351 201 350 202 350 194 341 194 341 193 342 192 342 192 343 191 343 191 344 190 344 190 344 189 345 189 345 188 346 187 346 187 346 186 347 186 347 192 357"
                stroke="rgb(0,0,0)" fill="rgb(0,0,0)" />
            <polygon
                points="181 362 182 362 182 362 183 361 184 361 184 361 185 361 186 360 187 360 187 360 188 359 189 359 190 359 190 358 191 358 192 357 186 347 185 347 184 348 184 348 183 348 183 349 182 349 181 349 181 349 180 350 180 350 179 350 178 350 178 351 177 351 177 351 181 362"
                stroke="rgb(0,0,0)" fill="rgb(0,0,0)" />
            <polygon
                points="169 365 170 365 170 365 171 364 172 364 173 364 174 364 174 364 175 364 176 364 177 363 178 363 178 363 179 363 180 362 181 362 177 351 176 351 176 351 175 351 174 352 174 352 173 352 173 352 172 352 171 352 171 352 170 352 170 353 169 353 168 353 168 353 169 365"
                stroke="rgb(18,18,18)" fill="rgb(18,18,18)" />
            <polygon
                points="157 365 158 365 159 365 159 365 160 365 161 365 162 365 163 365 163 365 164 365 165 365 166 365 167 365 167 365 168 365 169 365 168 353 167 353 167 353 166 353 165 353 165 353 164 353 163 353 163 353 162 353 161 353 161 353 160 353 159 353 159 353 158 353 157 365"
                stroke="rgb(36,36,36)" fill="rgb(36,36,36)" />
            <polygon
                points="145 362 146 362 147 363 148 363 148 363 149 363 150 364 151 364 152 364 152 364 153 364 154 364 155 364 156 365 156 365 157 365 158 353 158 353 157 353 156 353 156 352 155 352 155 352 154 352 153 352 153 352 152 352 152 352 151 351 150 351 150 351 149 351 145 362"
                stroke="rgb(54,54,54)" fill="rgb(54,54,54)" />
            <polygon
                points="134 357 135 358 136 358 136 359 137 359 138 359 139 360 139 360 140 360 141 361 142 361 142 361 143 361 144 362 144 362 145 362 149 351 149 351 148 351 148 350 147 350 146 350 146 350 145 349 145 349 144 349 143 349 143 348 142 348 142 348 141 347 140 347 134 357"
                stroke="rgb(72,72,72)" fill="rgb(72,72,72)" />
            <polygon
                points="124 350 125 350 125 351 126 352 127 352 127 353 128 353 129 354 129 354 130 355 131 355 131 356 132 356 133 357 134 357 134 357 140 347 140 347 139 346 139 346 138 346 137 345 137 345 136 344 136 344 135 344 135 343 134 343 134 342 133 342 132 341 132 341 124 350"
                stroke="rgb(90,90,90)" fill="rgb(90,90,90)" />
            <polygon
                points="116 341 117 342 117 342 118 343 118 344 119 344 119 345 120 345 120 346 121 347 121 347 122 348 122 348 123 349 123 349 124 350 132 341 132 341 131 340 131 340 130 339 130 339 129 338 129 338 129 338 128 337 128 337 127 336 127 336 127 335 126 335 126 334 116 341"
                stroke="rgb(108,108,108)" fill="rgb(108,108,108)" />
            <polygon
                points="110 331 110 331 111 332 111 333 111 334 112 334 112 335 113 336 113 336 113 337 114 338 114 338 115 339 115 340 116 341 116 341 126 334 126 334 125 333 125 333 124 332 124 332 124 331 123 330 123 330 123 329 122 329 122 328 122 327 121 327 121 326 121 326 110 331"
                stroke="rgb(126,126,126)" fill="rgb(126,126,126)" />
            <polygon
                points="106 319 106 320 107 320 107 321 107 322 107 323 107 324 108 324 108 325 108 326 108 327 109 327 109 328 109 329 110 330 110 331 121 326 121 325 120 324 120 324 120 323 120 323 120 322 119 322 119 321 119 320 119 320 119 319 118 319 118 318 118 317 118 317 106 319"
                stroke="rgb(144,144,144)" fill="rgb(144,144,144)" />
            <polygon
                points="105 307 105 308 105 309 105 309 105 310 105 311 105 312 105 313 105 313 105 314 106 315 106 316 106 316 106 317 106 318 106 319 118 317 118 316 118 315 118 315 118 314 117 314 117 313 117 312 117 312 117 311 117 310 117 310 117 309 117 308 117 308 117 307 105 307"
                stroke="rgb(162,162,162)" fill="rgb(162,162,162)" />
            <polygon
                points="106 295 106 296 106 297 106 298 106 298 106 299 105 300 105 301 105 301 105 302 105 303 105 304 105 305 105 305 105 306 105 307 117 307 117 306 117 306 117 305 117 304 117 304 117 303 117 302 117 302 117 301 117 300 118 300 118 299 118 299 118 298 118 297 106 295"
                stroke="rgb(180,180,180)" fill="rgb(180,180,180)" />
            <polygon
                points="110 283 110 284 109 285 109 286 109 287 108 287 108 288 108 289 108 290 107 290 107 291 107 292 107 293 107 294 106 294 106 295 118 297 118 297 118 296 118 295 119 295 119 294 119 294 119 293 119 292 120 292 120 291 120 291 120 290 120 290 121 289 121 288 110 283"
                stroke="rgb(198,198,198)" fill="rgb(198,198,198)" />
            <polygon
                points="116 273 116 273 115 274 115 275 114 276 114 276 113 277 113 278 113 278 112 279 112 280 111 280 111 281 111 282 110 283 110 283 121 288 121 288 121 287 122 287 122 286 122 285 123 285 123 284 123 284 124 283 124 282 124 282 125 281 125 281 126 280 126 280 116 273"
                stroke="rgb(216,216,216)" fill="rgb(216,216,216)" />
            <polygon
                points="124 264 123 265 123 265 122 266 122 266 121 267 121 267 120 268 120 269 119 269 119 270 118 270 118 271 117 272 117 272 116 273 126 280 126 279 127 279 127 278 127 278 128 277 128 277 129 276 129 276 129 276 130 275 130 275 131 274 131 274 132 273 132 273 124 264"
                stroke="rgb(234,234,234)" fill="rgb(234,234,234)" />
            <polygon
                points="134 257 134 257 133 257 132 258 131 258 131 259 130 259 129 260 129 260 128 261 127 261 127 262 126 262 125 263 125 264 124 264 132 273 132 273 133 272 134 272 134 271 135 271 135 270 136 270 136 270 137 269 137 269 138 268 139 268 139 268 140 267 140 267 134 257"
                stroke="rgb(252,252,252)" fill="rgb(252,252,252)" />
            <polygon
                points="145 252 144 252 144 252 143 253 142 253 142 253 141 253 140 254 139 254 139 254 138 255 137 255 136 255 136 256 135 256 134 257 140 267 141 267 142 266 142 266 143 266 143 265 144 265 145 265 145 265 146 264 146 264 147 264 148 264 148 263 149 263 149 263 145 252"
                stroke="rgb(255,255,255)" fill="rgb(255,255,255)" />
            <polygon
                points="157 249 156 249 156 249 155 250 154 250 153 250 152 250 152 250 151 250 150 250 149 251 148 251 148 251 147 251 146 252 145 252 149 263 150 263 150 263 151 263 152 262 152 262 153 262 153 262 154 262 155 262 155 262 156 262 156 261 157 261 158 261 158 261 157 249"
                stroke="rgb(237,237,237)" fill="rgb(237,237,237)" />
            <polygon
                points="169 249 168 249 167 249 167 249 166 249 165 249 164 249 163 249 163 249 162 249 161 249 160 249 159 249 159 249 158 249 157 249 158 261 159 261 159 261 160 261 161 261 161 261 162 261 163 261 163 261 164 261 165 261 165 261 166 261 167 261 167 261 168 261 169 249"
                stroke="rgb(219,219,219)" fill="rgb(219,219,219)" />
            <polygon
                points="181 252 180 252 179 251 178 251 178 251 177 251 176 250 175 250 174 250 174 250 173 250 172 250 171 250 170 249 170 249 169 249 168 261 168 261 169 261 170 261 170 262 171 262 171 262 172 262 173 262 173 262 174 262 174 262 175 263 176 263 176 263 177 263 181 252"
                stroke="rgb(201,201,201)" fill="rgb(201,201,201)" />
            <polygon
                points="192 257 191 256 190 256 190 255 189 255 188 255 187 254 187 254 186 254 185 253 184 253 184 253 183 253 182 252 182 252 181 252 177 263 177 263 178 263 178 264 179 264 180 264 180 264 181 265 181 265 182 265 183 265 183 266 184 266 184 266 185 267 186 267 192 257"
                stroke="rgb(183,183,183)" fill="rgb(183,183,183)" />
            <polygon
                points="202 264 201 264 201 263 200 262 199 262 199 261 198 261 197 260 197 260 196 259 195 259 195 258 194 258 193 257 192 257 192 257 186 267 186 267 187 268 187 268 188 268 189 269 189 269 190 270 190 270 191 270 191 271 192 271 192 272 193 272 194 273 194 273 202 264"
                stroke="rgb(165,165,165)" fill="rgb(165,165,165)" />
            <polygon
                points="210 273 209 272 209 272 208 271 208 270 207 270 207 269 206 269 206 268 205 267 205 267 204 266 204 266 203 265 203 265 202 264 194 273 194 273 195 274 195 274 196 275 196 275 197 276 197 276 197 276 198 277 198 277 199 278 199 278 199 279 200 279 200 280 210 273"
                stroke="rgb(147,147,147)" fill="rgb(147,147,147)" />
            <polygon
                points="216 283 216 283 215 282 215 281 215 280 214 280 214 279 213 278 213 278 213 277 212 276 212 276 211 275 211 274 210 273 210 273 200 280 200 280 201 281 201 281 202 282 202 282 202 283 203 284 203 284 203 285 204 285 204 286 204 287 205 287 205 288 205 288 216 283"
                stroke="rgb(129,129,129)" fill="rgb(129,129,129)" />
            <polygon
                points="220 295 220 294 219 294 219 293 219 292 219 291 219 290 218 290 218 289 218 288 218 287 217 287 217 286 217 285 216 284 216 283 205 288 205 289 206 290 206 290 206 291 206 291 206 292 207 292 207 293 207 294 207 294 207 295 208 295 208 296 208 297 208 297 220 295"
                stroke="rgb(111,111,111)" fill="rgb(111,111,111)" />
            <polygon
                points="221 307 221 306 221 305 221 305 221 304 221 303 221 302 221 301 221 301 221 300 220 299 220 298 220 298 220 297 220 296 220 295 208 297 208 298 208 299 208 299 208 300 209 300 209 301 209 302 209 302 209 303 209 304 209 304 209 305 209 306 209 306 209 307 221 307"
                stroke="rgb(93,93,93)" fill="rgb(93,93,93)" />
            <ellipse cx="164" cy="308" rx="46" ry="46" stroke="rgb(255,206,160)" stroke-linecap="butt"
                fill="rgb(255,206,160)" />

            <g class="polygon" stroke="rgb(71,71,71)" stroke-width="1" fill="rgb(218,48,160)">
                <polygon points="136 367 133 365 130 371 134 372" />
                <polygon points="130 364 126 361 123 367 126 369" />
                <polygon points="124 360 121 357 117 362 120 364" />
                <polygon points="118 355 115 352 111 356 114 359" />
                <polygon points="109 344 107 340 102 343 104 347" />
                <polygon points="105 337 103 334 98 336 100 340" />
                <polygon points="102 331 101 327 95 329 96 332" />
                <polygon points="100 324 99 320 93 321 94 325" />
                <polygon points="98 309 98 305 92 305 92 309" />
                <polygon points="98 302 99 298 93 297 92 301" />
                <polygon points="99 294 100 291 94 289 93 293" />
                <polygon points="101 287 102 284 97 282 95 285" />
                <polygon points="107 274 109 271 104 267 102 271" />
                <polygon points="111 268 114 265 109 261 107 264" />
                <polygon points="116 262 119 260 115 255 112 258" />
                <polygon points="121 257 124 255 121 250 118 253" />
                <polygon points="133 249 137 248 134 242 131 244" />
                <polygon points="140 246 144 245 142 239 138 241" />
                <polygon points="147 244 151 243 150 237 146 238" />
                <polygon points="154 243 158 242 158 236 154 237" />
                <polygon points="169 242 173 243 173 237 169 236" />
                <polygon points="176 243 180 244 181 238 177 237" />
                <polygon points="183 245 187 246 189 241 185 239" />
                <polygon points="190 248 194 249 196 244 193 242" />
                <polygon points="203 255 206 257 209 253 206 250" />
                <polygon points="208 260 211 262 215 258 212 255" />
                <polygon points="213 265 216 268 220 264 218 261" />
                <polygon points="218 271 220 274 225 271 223 267" />
                <polygon points="225 284 226 287 232 285 230 282" />
                <polygon points="227 291 228 294 234 293 233 289" />
                <polygon points="228 298 229 302 235 301 234 297" />
                <polygon points="229 305 229 309 235 309 235 305" />
                <polygon points="228 319 227 323 233 324 234 320" />
                <polygon points="226 326 225 330 231 331 232 328" />
                <polygon points="224 333 222 337 227 340 229 336" />
                <polygon points="221 340 219 343 224 346 226 343" />
                <polygon points="212 352 209 354 214 359 216 356" />
                <polygon points="207 356 204 359 208 364 211 361" />
                <polygon points="201 361 197 364 201 369 204 366" />
                <polygon points="195 365 191 367 194 372 198 370" />
                <polygon points="136 367 133 365 130 371 134 372" />
                <polygon points="130 364 126 361 123 367 126 369" />
                <polygon points="124 360 121 357 117 362 120 364" />
                <polygon points="118 355 115 352 111 356 114 359" />
                <polygon points="109 344 107 340 102 343 104 347" />
                <polygon points="105 337 103 334 98 336 100 340" />
                <polygon points="102 331 101 327 95 329 96 332" />
                <polygon points="100 324 99 320 93 321 94 325" />
                <polygon points="98 309 98 305 92 305 92 309" />
                <polygon points="98 302 99 298 93 297 92 301" />
                <polygon points="99 294 100 291 94 289 93 293" />
                <polygon points="101 287 102 284 97 282 95 285" />
                <polygon points="107 274 109 271 104 267 102 271" />
                <polygon points="111 268 114 265 109 261 107 264" />
                <polygon points="116 262 119 260 115 255 112 258" />
                <polygon points="121 257 124 255 121 250 118 253" />
                <polygon points="133 249 137 248 134 242 131 244" />
                <polygon points="140 246 144 245 142 239 138 241" />
                <polygon points="147 244 151 243 150 237 146 238" />
                <polygon points="154 243 158 242 158 236 154 237" />
                <polygon points="169 242 173 243 173 237 169 236" />
                <polygon points="176 243 180 244 181 238 177 237" />
                <polygon points="183 245 187 246 189 241 185 239" />
                <polygon points="190 248 194 249 196 244 193 242" />
                <polygon points="203 255 206 257 209 253 206 250" />
                <polygon points="208 260 211 262 215 258 212 255" />
                <polygon points="213 265 216 268 220 264 218 261" />
                <polygon points="218 271 220 274 225 271 223 267" />
                <polygon points="225 284 226 287 232 285 230 282" />
                <polygon points="227 291 228 294 234 293 233 289" />
                <polygon points="228 298 229 302 235 301 234 297" />
                <polygon points="229 305 229 309 235 309 235 305" />
                <polygon points="228 319 227 323 233 324 234 320" />
                <polygon points="226 326 225 330 231 331 232 328" />
                <polygon points="224 333 222 337 227 340 229 336" />
                <polygon points="221 340 219 343 224 346 226 343" />
                <polygon points="212 352 209 354 214 359 216 356" />
                <polygon points="207 356 204 359 208 364 211 361" />
                <polygon points="201 361 197 364 201 369 204 366" />
                <polygon points="195 365 191 367 194 372 198 370" />
            </g>

            <g class="polygon" stroke="rgb(218,48,160)" stroke-width="1" fill="rgb(255,0,0)">
                <polygon points="144 367 140 366 136 377 140 378" />
                <polygon points="115 348 113 344 104 352 106 355" />
                <polygon points="102 316 101 312 89 313 90 317" />
                <polygon points="106 282 108 278 97 273 96 277" />
                <polygon points="129 256 132 253 126 243 122 245" />
                <polygon points="162 246 166 246 166 234 162 234" />
                <polygon points="195 253 198 256 205 245 201 243" />
                <polygon points="219 278 221 282 231 277 230 273" />
                <polygon points="226 312 225 316 237 317 238 313" />
                <polygon points="214 344 212 348 221 355 223 352" />
                <polygon points="187 366 183 367 187 378 191 377" />
                <polygon points="144 367 140 366 136 377 140 378" />
                <polygon points="115 348 113 344 104 352 106 355" />
                <polygon points="102 316 101 312 89 313 90 317" />
                <polygon points="106 282 108 278 97 273 96 277" />
                <polygon points="129 256 132 253 126 243 122 245" />
                <polygon points="162 246 166 246 166 234 162 234" />
                <polygon points="195 253 198 256 205 245 201 243" />
                <polygon points="219 278 221 282 231 277 230 273" />
                <polygon points="226 312 225 316 237 317 238 313" />
                <polygon points="214 344 212 348 221 355 223 352" />
                <polygon points="187 366 183 367 187 378 191 377" />
            </g>

            <g class="textgroup" fill="rgb(71,71,71)" stroke="none" font-family="Arial" font-size="14.00pt"
                font-weight="bold" text-anchor="start">
                <text x="124" y="391">0</text>
                <text x="88" y="362">10</text>
                <text x="71" y="319">20</text>
                <text x="80" y="275">30</text>
                <text x="110" y="241">40</text>
                <text x="154" y="229">50</text>
                <text x="198" y="240">60</text>
                <text x="230" y="273">70</text>
                <text x="240" y="319">80</text>
                <text x="222" y="364">90</text>
                <text x="183" y="392">100</text>
            </g>
            <g fill="rgb(21,21,21)" stroke="none" font-family="Arial" font-size="20.00pt" font-weight="bold"
                text-anchor="middle">
                <rect x="130" y="359" width="70" height="24" stroke="rgb(255,232,167)" stroke-width="1"
                    fill="rgb(255,232,167)"></rect>
                <text id="GaugeValue" x="165" y="379">6.29</text>
            </g>
            <g id="needle">
                <polygon points="145 355 161 324 152 322 145 355" stroke="rgb(105,105,105)" stroke-width="1"
                    fill="rgb(160,160,160)" />
                <polygon points="146 356 162 325 153 323 146 356" stroke="rgb(105,105,105)" stroke-width="1"
                    fill="rgb(160,160,160)" />
            </g>
            <g fill="rgb(0,0,196)" stroke="none" font-family="Tahoma" font-size="9.00pt" text-anchor="middle">
                <text id="text_280530371" x="164" y="311">Knob</text>
            </g>
        </g>
    </svg>

我认为创造Math.random()个价值是不对的.试试这个:

  var value = Math.random() * (max - min) + min;

Javascript相关问答推荐

在拖放时阻止文件打开

Ember.js 5.4更新会话存储时如何更新组件变量

如何在每次单击按钮时重新加载HighChart/设置HighChart动画?

如何在Node.js中排除导出的JS文件

如何使用抽屉屏幕及其子屏幕/组件的上下文?

递增/递减按钮React.js/Redux

为什么这个最小Angular 的Licial.dev设置不起作用?

如何格式化API的响应

CSS网格使页面自动滚动

使用JavaScript或PHP从div ID值创建锚标记和链接

TS node 找不到依赖的模块

扩展更新所有输入的CSSprops 的函数

动画可以在Chrome上运行,但不能在Safari上运行

无法将产品添加到Collection 夹屏幕并获取此TypeError:undefined不是函数?

Reaction-跨多个组件共享一个功能

为什么我需要从另一个模块调用一个对象两次?

onmouseover事件在Edge浏览器中突然不起作用

用对象填充数组的快速方法

如何在链接函数中使用原始缓冲区?

无法将bson类型转换为日期MongoDB