我正在使用量规.指针没有正确旋转.它的工作原理就像第一个旋转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>