i am working on guage .. needle is not rotating correctly .. it works like if first rotate angle is 30 then needle goes to 30 degree then next value is 50 then it starts from 30 angle and goest to 30+50= 80 and so on. no getting it exact angle..i have fixed centerx and centery point .. my source code is here.. fiddle link : https://jsfiddle.net/harshadpatson/vjzywu1d/4/ used this library
<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 script code:
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);
my svg code
<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>