利用jQuery实现SVG仪表盘数值代码



9 32 11



特效描述:利用jQuery实现 SVG仪表盘 数值代码,利用jQuery实现SVG仪表盘数值代码

代码结构

1. 引入CSS

<link  rel="stylesheet" href='css/style.css'>

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/style.js"></script>

3. HTML代码

<div id="kedu" class="kedu">
  <svg version="1.1" viewBox="0 0 300 300" class= "absolute"style="width: 300px; height: 300px;">
    <g transform="scale (1)" style="width: 300px; height: 300px;">
      <path fill="rgb(88,164,250)" fill-opacity="1" stroke="rgb(88,164,250)" stroke-opacity="1" stroke-		width="1" stroke-dasharray="" d="M 15,149.99999999999997 L 15.084096594632939,145.2356523727099 L 		16.58316218802591,145.28858956856868 L 16.5,149.99999999999997 L 15,149.99999999999997 "> </path>
      <path fill="rgb(90,167,245)" fill-opacity="1" stroke="rgb(90,167,245)" stroke-opacity="1" stroke-		width="1" stroke-dasharray="" d="M 15.084096594632939,145.2356523727099 L 							15.3362816046469,140.47724052928805 L 16.83254514237302,140.5830489678515 L 						16.58316218802591,145.28858956856868 L 15.084096594632939,145.2356523727099 "> 
		</path>
      <path fill="rgb(92,170,241)" fill-opacity="1" stroke="rgb(92,170,241)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 15.3362816046469,140.47724052928805 L 15.756240838922423,135.73069285835496 L 17.247838162934414,135.88924071548433 L 16.83254514237302,140.5830489678515 L 15.3362816046469,140.47724052928805 ">
		</path>
      <path fill="rgb(94,173,236)" fill-opacity="1" stroke="rgb(94,173,236)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 15.756240838922423,135.73069285835496 L 16.343451080548675,131.00192296724978 L 17.828523846320337,131.21301271205812 L 17.247838162934414,135.88924071548433 L 15.756240838922423,135.73069285835496 ">
		</path>
      <path fill="rgb(96,176,232)" fill-opacity="1" stroke="rgb(96,176,232)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 16.343451080548675,131.00192296724978 L 17.097180738686234,126.29682231441168 L 18.57387873047861,126.56019095536267 L 17.828523846320337,131.21301271205812 L 16.343451080548675,131.00192296724978 ">
		</path>
      <path fill="rgb(98,179,227)" fill-opacity="1" stroke="rgb(98,179,227)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 17.097180738686234,126.29682231441168 L 18.01649076003855,121.62125286935643 L 19.48297419603813,121.93657228191914 L 18.57387873047861,126.56019095536267 L 17.097180738686234,126.29682231441168 ">
		</path>
      <path fill="rgb(100,182,223)" fill-opacity="1" stroke="rgb(100,182,223)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 18.01649076003855,121.62125286935643 L 19.100235798795097,116.98103980939203 L 20.55467762325293,117.34791714484322 L 19.48297419603813,121.93657228191914 L 18.01649076003855,121.62125286935643 ">
		</path>
      <path fill="rgb(102,185,218)" fill-opacity="1" stroke="rgb(102,185,218)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 19.100235798795097,116.98103980939203 L 20.347065643589815,112.38196426217357 L 21.787653803105457,112.7999424370383 L 20.55467762325293,117.34791714484322 L 19.100235798795097,116.98103980939203 ">
		</path>
      <path fill="rgb(104,187,214)" fill-opacity="1" stroke="rgb(104,187,214)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 20.347065643589815,112.38196426217357 L 21.755426899696232,107.82975610313778 L 23.18036660081073,108.29831436865848 L 21.787653803105457,112.7999424370383 L 20.347065643589815,112.38196426217357 ">
		</path>
      <path fill="rgb(106,190,209)" fill-opacity="1" stroke="rgb(106,190,209)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 21.755426899696232,107.82975610313778 L 23.323564924364007,103.33008681679195 L 24.73108086964885,103.84864140771649 L 23.18036660081073,108.29831436865848 L 21.755426899696232,107.82975610313778 ">
		</path>
      <path fill="rgb(108,193,205)" fill-opacity="1" stroke="rgb(108,193,205)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 23.323564924364007,103.33008681679195 L 25.04952601288514,98.88856243075008 L 26.43786461274196,99.45646729263063 L 24.73108086964885,103.84864140771649 L 23.323564924364007,103.33008681679195 ">
		</path>
      <path fill="rgb(110,196,200)" fill-opacity="1" stroke="rgb(110,196,200)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 25.04952601288514,98.88856243075008 L 26.931159832666836,94.51071653132107 L 28.298591390081654,95.1272641254175 L 26.43786461274196,99.45646729263063 L 25.04952601288514,98.88856243075008 ">
		</path>
      <path fill="rgb(112,199,196)" fill-opacity="1" stroke="rgb(112,199,196)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 26.931159832666836,94.51071653132107 L 28.966122102278177,90.20200336934887 L 30.310942967808415,90.86642555413388 L 28.298591390081654,95.1272641254175 L 26.931159832666836,94.51071653132107 ">
		</path>
      <path fill="rgb(114,202,191)" fill-opacity="1" stroke="rgb(114,202,191)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 28.966122102278177,90.20200336934887 L 31.15187751213267,85.96779106489544 L 32.472412206442314,86.67926005306327 L 30.310942967808415,90.86642555413388 L 28.966122102278177,90.20200336934887 ">
		</path>
      <path fill="rgb(116,205,187)" fill-opacity="1" stroke="rgb(116,205,187)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 31.15187751213267,85.96779106489544 L 33.48570288316864,81.8133549192311 L 34.78030618446677,82.57098430901742 L 32.472412206442314,86.67926005306327 L 31.15187751213267,85.96779106489544 ">
		</path>
      <path fill="rgb(118,208,182)" fill-opacity="1" stroke="rgb(118,208,182)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 33.48570288316864,81.8133549192311 L 35.964690559590935,77.74387084246658 L 37.23174955337326,78.54671672199473 L 34.78030618446677,82.57098430901742 L 33.48570288316864,81.8133549192311 ">
		</path>
      <path fill="rgb(120,211,178)" fill-opacity="1" stroke="rgb(120,211,178)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 35.964690559590935,77.74387084246658 L 38.58575203144807,73.76440890501324 L 39.82368811998754,74.61147102829088 L 37.23174955337326,78.54671672199473 L 35.964690559590935,77.74387084246658 ">
		</path>
      <path fill="rgb(122,214,173)" fill-opacity="1" stroke="rgb(122,214,173)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 38.58575203144807,73.76440890501324 L 41.345621782531026,69.8799270209069 L 42.552892651614016,70.77015005400794 L 39.82368811998754,74.61147102829088 L 38.58575203144807,73.76440890501324 ">
		</path>
      <path fill="rgb(124,217,169)" fill-opacity="1" stroke="rgb(124,217,169)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 41.345621782531026,69.8799270209069 L 44.240861358799904,66.09526477086399 L 45.41596289925768,67.02753960674328 L 42.552892651614016,70.77015005400794 L 41.345621782531026,69.8799270209069 ">
		</path>
      <path fill="rgb(126,220,164)" fill-opacity="1" stroke="rgb(126,220,164)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 44.240861358799904,66.09526477086399 L 47.267863652269355,62.415137372766964 L 48.40933183391081,63.38830251306956 L 45.41596289925768,67.02753960674328 L 44.240861358799904,66.09526477086399 ">
		</path>
      <path fill="rgb(128,223,160)" fill-opacity="1" stroke="rgb(128,223,160)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 47.267863652269355,62.415137372766964 L 50.42285739501601,58.84412980708986 L 51.52927009062694,59.85697280923331 L 48.40933183391081,63.38830251306956 L 47.267863652269355,62.415137372766964 ">
		</path>
      <path fill="rgb(130,226,155)" fill-opacity="1" stroke="rgb(130,226,155)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 50.42285739501601,58.84412980708986 L 53.701911857708666,55.38669110458355 L 54.77189061484523,56.4379500923104 L 51.52927009062694,59.85697280923331 L 50.42285739501601,58.84412980708986 ">
		</path>
      <path fill="rgb(132,229,151)" fill-opacity="1" stroke="rgb(132,229,151)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 53.701911857708666,55.38669110458355 L 57.100941746807706,52.047128803337344 L 58.13315350517652,53.13549403885581 L 54.77189061484523,56.4379500923104 L 53.701911857708666,55.38669110458355 ">
		</path>
      <path fill="rgb(134,232,146)" fill-opacity="1" stroke="rgb(134,232,146)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 57.100941746807706,52.047128803337344 L 60.61571229433194,48.829603582123084 L 61.60887104661714,49.95371909787728 L 58.13315350517652,53.13549403885581 L 57.100941746807706,52.047128803337344 ">
		</path>
      <path fill="rgb(136,234,142)" fill-opacity="1" stroke="rgb(136,234,142)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 60.61571229433194,48.829603582123084 L 64.2418445338523,45.73812407670748 L 65.1947129279206,46.896589364744074 L 61.60887104661714,49.95371909787728 L 60.61571229433194,48.829603582123084 ">
		</path>
      <path fill="rgb(138,237,137)" fill-opacity="1" stroke="rgb(138,237,137)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 64.2418445338523,45.73812407670748 L 67.97482075613861,42.77654188559106 L 68.88621163662597,43.96791364241783 L 65.1947129279206,46.896589364744074 L 64.2418445338523,45.73812407670748 ">
		</path>
      <path fill="rgb(140,240,133)" fill-opacity="1" stroke="rgb(140,240,133)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 67.97482075613861,42.77654188559106 L 71.80999013766296,39.9485467713959 L 72.67876802502226,41.17134069615817 L 68.88621163662597,43.96791364241783 L 67.97482075613861,42.77654188559106 ">
		</path>
      <path fill="rgb(142,243,128)" fill-opacity="1" stroke="rgb(142,243,128)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 71.80999013766296,39.9485467713959 L 75.74257453494641,37.25766206388121 L 76.56765704011367,38.51035470761586 L 72.67876802502226,41.17134069615817 L 71.80999013766296,39.9485467713959 ">
		</path>
      <path fill="rgb(144,246,124)" fill-opacity="1" stroke="rgb(144,246,124)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 75.74257453494641,37.25766206388121 L 79.76767443753091,34.70724027031294 L 80.54803361044723,35.988270933976125 L 76.56765704011367,38.51035470761586 L 75.74257453494641,37.25766206388121 ">
		</path>
      <path fill="rgb(146,249,119)" fill-opacity="1" stroke="rgb(146,249,119)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 79.76767443753091,34.70724027031294 L 83.88027507215914,32.3004588986573 L 84.61493868246848,33.608231577561114 L 80.54803361044723,35.988270933976125 L 79.76767443753091,34.70724027031294 ">
		</path>
      <path fill="rgb(148,252,115)" fill-opacity="1" stroke="rgb(148,252,115)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 83.88027507215914,32.3004588986573 L 88.0752526505578,30.040316498801346 L 88.76330539888494,31.373201871036898 L 84.61493868246848,33.608231577561114 L 83.88027507215914,32.3004588986573 ">
		</path>
      <path fill="rgb(150,255,110)" fill-opacity="1" stroke="rgb(150,255,110)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 88.0752526505578,30.040316498801346 L 92.34738075303923,27.929628926733542 L 92.98796541133879,29.285966383103172 L 88.76330539888494,31.373201871036898 L 88.0752526505578,30.040316498801346 ">
		</path>
      <path fill="rgb(153,255,108)" fill-opacity="1" stroke="rgb(153,255,108)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 92.34738075303923,27.929628926733542 L 96.69133683997018,25.971025836337432 L 97.28365531952605,27.349125549267015 L 92.98796541133879,29.285966383103172 L 92.34738075303923,27.929628926733542 ">
		</path>
      <path fill="rgb(157,254,107)" fill-opacity="1" stroke="rgb(157,254,107)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 96.69133683997018,25.971025836337432 L 101.10170888299285,24.166947403170667 L 101.64502322873739,25.565092432024315 L 97.28365531952605,27.349125549267015 L 96.69133683997018,25.971025836337432 ">
		</path>
      <path fill="rgb(160,254,105)" fill-opacity="1" stroke="rgb(160,254,105)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 101.10170888299285,24.166947403170667 L 105.57300210773865,22.519641284309984 L 106.06663541765266,23.93608971448431 L 101.64502322873739,25.565092432024315 L 101.10170888299285,24.166947403170667 ">
		</path>
      <path fill="rgb(164,254,103)" fill-opacity="1" stroke="rgb(164,254,103)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 105.57300210773865,22.519641284309984 L 110.09964583963266,21.031159818050412 L 110.54298310808119,22.46414693118318 L 106.06663541765266,23.93608971448431 L 105.57300210773865,22.519641284309984 ">
		</path>
      <path fill="rgb(167,253,102)" fill-opacity="1" stroke="rgb(167,253,102)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 110.09964583963266,21.031159818050412 L 114.6760004442605,19.703357466947324 L 115.06848932821316,21.151097939536783 L 110.54298310808119,22.46414693118318 L 110.09964583963266,21.031159818050412 ">
		</path>
      <path fill="rgb(171,253,100)" fill-opacity="1" stroke="rgb(171,253,100)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 114.6760004442605,19.703357466947324 L 119.29636435365063,18.537888507386953 L 119.6375158608323,19.99857863508265 L 115.06848932821316,21.151097939536783 L 114.6760004442605,19.703357466947324 ">
		</path>
      <path fill="rgb(174,252,98)" fill-opacity="1" stroke="rgb(174,252,98)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 119.29636435365063,18.537888507386953 L 123.95498116971797,17.536204968564135 L 124.24437026783221,19.008024913357872 L 119.6375158608323,19.99857863508265 L 119.29636435365063,18.537888507386953 ">
		</path>
      <path fill="rgb(178,252,97)" fill-opacity="1" stroke="rgb(178,252,97)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 123.95498116971797,17.536204968564135 L 128.64604683601897,16.699554823434653 L 128.88331298228542,18.18067088095205 L 124.24437026783221,19.008024913357872 L 123.95498116971797,17.536204968564135 ">
		</path>
      <path fill="rgb(181,252,95)" fill-opacity="1" stroke="rgb(181,252,95)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 128.64604683601897,16.699554823434653 L 133.3637168688836,16.02898043389635 L 133.54856445922934,17.51754731796416 L 128.88331298228542,18.18067088095205 L 128.64604683601897,16.699554823434653 ">
		</path>
      <path fill="rgb(184,251,93)" fill-opacity="1" stroke="rgb(184,251,93)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 133.3637168688836,16.02898043389635 L 138.10211363891378,15.525317252135977 L 138.23431237625917,17.019480393778906 L 133.54856445922934,17.51754731796416 L 133.3637168688836,16.02898043389635 ">
		</path>
      <path fill="rgb(188,251,92)" fill-opacity="1" stroke="rgb(188,251,92)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 138.10211363891378,15.525317252135977 L 142.855333693778,15.189192779759907 L 142.93471887495824,16.687090637762594 L 138.23431237625917,17.019480393778906 L 138.10211363891378,15.525317252135977 ">
		</path>
      <path fill="rgb(191,251,90)" fill-opacity="1" stroke="rgb(191,251,90)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 142.855333693778,15.189192779759907 L 147.61745511317764,15.021025786005197 L 147.64392783414235,16.520792166160703 L 142.93471887495824,16.687090637762594 L 142.855333693778,15.189192779759907 ">
		</path>
      <path fill="rgb(195,250,88)" fill-opacity="1" stroke="rgb(195,250,88)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 147.61745511317764,15.021025786005197 L 152.3825448868224,15.021025786005197 L 152.35607216585768,16.520792166160703 L 147.64392783414235,16.520792166160703 L 147.61745511317764,15.021025786005197 ">
		</path>
      <path fill="rgb(198,250,87)" fill-opacity="1" stroke="rgb(198,250,87)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 152.3825448868224,15.021025786005197 L 157.144666306222,15.189192779759907 L 157.06528112504176,16.687090637762594 L 152.35607216585768,16.520792166160703 L 152.3825448868224,15.021025786005197 ">
		</path>
      <path fill="rgb(202,249,85)" fill-opacity="1" stroke="rgb(202,249,85)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 157.144666306222,15.189192779759907 L 161.89788636108625,15.525317252135977 L 161.76568762374083,17.019480393778906 L 157.06528112504176,16.687090637762594 L 157.144666306222,15.189192779759907 ">
		</path>
      <path fill="rgb(205,249,83)" fill-opacity="1" stroke="rgb(205,249,83)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 161.89788636108625,15.525317252135977 L 166.63628313111641,16.02898043389635 L 166.4514355407707,17.51754731796416 L 161.76568762374083,17.019480393778906 L 161.89788636108625,15.525317252135977 ">
		</path>
      <path fill="rgb(209,249,82)" fill-opacity="1" stroke="rgb(209,249,82)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 166.63628313111641,16.02898043389635 L 171.35395316398103,16.699554823434653 L 171.11668701771458,18.18067088095205 L 166.4514355407707,17.51754731796416 L 166.63628313111641,16.02898043389635 ">
		</path>
      <path fill="rgb(212,248,80)" fill-opacity="1" stroke="rgb(212,248,80)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 171.35395316398103,16.699554823434653 L 176.04501883028206,17.536204968564135 L 175.75562973216782,19.008024913357872 L 171.11668701771458,18.18067088095205 L 171.35395316398103,16.699554823434653 ">
		</path>
      <path fill="rgb(215,248,78)" fill-opacity="1" stroke="rgb(215,248,78)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 176.04501883028206,17.536204968564135 L 180.7036356463494,18.537888507386953 L 180.36248413916772,19.99857863508265 L 175.75562973216782,19.008024913357872 L 176.04501883028206,17.536204968564135 ">
		</path>
      <path fill="rgb(219,248,77)" fill-opacity="1" stroke="rgb(219,248,77)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 180.7036356463494,18.537888507386953 L 185.32399955573948,19.703357466947296 L 184.93151067178684,21.151097939536783 L 180.36248413916772,19.99857863508265 L 180.7036356463494,18.537888507386953 ">
		</path>
      <path fill="rgb(222,247,75)" fill-opacity="1" stroke="rgb(222,247,75)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 185.32399955573948,19.703357466947296 L 189.90035416036736,21.031159818050412 L 189.45701689191884,22.46414693118318 L 184.93151067178684,21.151097939536783 L 185.32399955573948,19.703357466947296 ">
		</path>
      <path fill="rgb(226,247,73)" fill-opacity="1" stroke="rgb(226,247,73)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 189.90035416036736,21.031159818050412 L 194.42699789226134,22.519641284309984 L 193.93336458234734,23.93608971448431 L 189.45701689191884,22.46414693118318 L 189.90035416036736,21.031159818050412 ">
		</path>
      <path fill="rgb(229,246,72)" fill-opacity="1" stroke="rgb(229,246,72)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 194.42699789226134,22.519641284309984 L 198.89829111700715,24.166947403170667 L 198.3549767712626,25.565092432024315 L 193.93336458234734,23.93608971448431 L 194.42699789226134,22.519641284309984 ">
		</path>
      <path fill="rgb(233,246,70)" fill-opacity="1" stroke="rgb(233,246,70)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 198.89829111700715,24.166947403170667 L 203.30866316002982,25.971025836337432 L 202.71634468047392,27.349125549267015 L 198.3549767712626,25.565092432024315 L 198.89829111700715,24.166947403170667 ">
		</path>
      <path fill="rgb(236,246,68)" fill-opacity="1" stroke="rgb(236,246,68)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 203.30866316002982,25.971025836337432 L 207.65261924696077,27.92962892673353 L 207.0120345886612,29.28596638310316 L 202.71634468047392,27.349125549267015 L 203.30866316002982,25.971025836337432 ">
		</path>
      <path fill="rgb(240,245,67)" fill-opacity="1" stroke="rgb(240,245,67)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 207.65261924696077,27.92962892673353 L 211.9247473494422,30.04031649880136 L 211.23669460111506,31.373201871036912 L 207.0120345886612,29.28596638310316 L 207.65261924696077,27.92962892673353 ">
		</path>
      <path fill="rgb(243,245,65)" fill-opacity="1" stroke="rgb(243,245,65)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 211.9247473494422,30.04031649880136 L 216.11972492784082,32.30045889865728 L 215.3850613175315,33.6082315775611 L 211.23669460111506,31.373201871036912 L 211.9247473494422,30.04031649880136 ">
		</path>
      <path fill="rgb(243,237,63)" fill-opacity="1" stroke="rgb(243,237,63)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 216.11972492784082,32.30045889865728 L 220.2323255624691,34.70724027031294 L 219.45196638955275,35.988270933976125 L 215.3850613175315,33.6082315775611 L 216.11972492784082,32.30045889865728 ">
		</path>
      <path fill="rgb(244,229,61)" fill-opacity="1" stroke="rgb(244,229,61)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 220.2323255624691,34.70724027031294 L 224.25742546505356,37.257662063881185 L 223.43234295988628,38.51035470761583 L 219.45196638955275,35.988270933976125 L 220.2323255624691,34.70724027031294 ">
		</path>
      <path fill="rgb(244,221,59)" fill-opacity="1" stroke="rgb(244,221,59)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 224.25742546505356,37.257662063881185 L 228.19000986233704,39.9485467713959 L 227.32123197497774,41.17134069615817 L 223.43234295988628,38.51035470761583 L 224.25742546505356,37.257662063881185 ">
		</path>
      <path fill="rgb(245,213,57)" fill-opacity="1" stroke="rgb(245,213,57)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 228.19000986233704,39.9485467713959 L 232.02517924386137,42.776541885591044 L 231.11378836337403,43.96791364241781 L 227.32123197497774,41.17134069615817 L 228.19000986233704,39.9485467713959 ">
		</path>
      <path fill="rgb(245,205,55)" fill-opacity="1" stroke="rgb(245,205,55)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 232.02517924386137,42.776541885591044 L 235.7581554661477,45.73812407670752 L 234.8052870720794,46.8965893647441 L 231.11378836337403,43.96791364241781 L 232.02517924386137,42.776541885591044 ">
		</path>
      <path fill="rgb(245,198,52)" fill-opacity="1" stroke="rgb(245,198,52)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 235.7581554661477,45.73812407670752 L 239.38428770566807,48.8296035821231 L 238.39112895338286,49.9537190978773 L 234.8052870720794,46.8965893647441 L 235.7581554661477,45.73812407670752 ">
		</path>
      <path fill="rgb(246,190,50)" fill-opacity="1" stroke="rgb(246,190,50)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 239.38428770566807,48.8296035821231 L 242.8990582531923,52.04712880333736 L 241.86684649482348,53.135494038855825 L 238.39112895338286,49.9537190978773 L 239.38428770566807,48.8296035821231 ">
		</path>
      <path fill="rgb(246,182,48)" fill-opacity="1" stroke="rgb(246,182,48)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 242.8990582531923,52.04712880333736 L 246.29808814229133,55.38669110458355 L 245.22810938515477,56.4379500923104 L 241.86684649482348,53.135494038855825 L 242.8990582531923,52.04712880333736 ">
		</path>
      <path fill="rgb(246,174,46)" fill-opacity="1" stroke="rgb(246,174,46)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 246.29808814229133,55.38669110458355 L 249.577142604984,58.8441298070899 L 248.47072990937306,59.85697280923334 L 245.22810938515477,56.4379500923104 L 246.29808814229133,55.38669110458355 ">
		</path>
      <path fill="rgb(247,166,44)" fill-opacity="1" stroke="rgb(247,166,44)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 249.577142604984,58.8441298070899 L 252.73213634773066,62.41513737276699 L 251.5906681660892,63.388302513069576 L 248.47072990937306,59.85697280923334 L 249.577142604984,58.8441298070899 ">
		</path>
      <path fill="rgb(247,158,42)" fill-opacity="1" stroke="rgb(247,158,42)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 252.73213634773066,62.41513737276699 L 255.75913864120008,66.09526477086399 L 254.5840371007423,67.02753960674328 L 251.5906681660892,63.388302513069576 L 252.73213634773066,62.41513737276699 ">
		</path>
      <path fill="rgb(248,150,40)" fill-opacity="1" stroke="rgb(248,150,40)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 255.75913864120008,66.09526477086399 L 258.65437821746895,69.87992702090689 L 257.447107348386,70.77015005400793 L 254.5840371007423,67.02753960674328 L 255.75913864120008,66.09526477086399 ">
		</path>
      <path fill="rgb(248,142,38)" fill-opacity="1" stroke="rgb(248,142,38)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 258.65437821746895,69.87992702090689 L 261.41424796855193,73.76440890501328 L 260.17631188001246,74.61147102829091 L 257.447107348386,70.77015005400793 L 258.65437821746895,69.87992702090689 ">
		</path>
      <path fill="rgb(248,134,36)" fill-opacity="1" stroke="rgb(248,134,36)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 261.41424796855193,73.76440890501328 L 264.0353094404091,77.74387084246658 L 262.7682504466268,78.54671672199473 L 260.17631188001246,74.61147102829091 L 261.41424796855193,73.76440890501328 ">
		</path>
      <path fill="rgb(249,126,34)" fill-opacity="1" stroke="rgb(249,126,34)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 264.0353094404091,77.74387084246658 L 266.51429711683136,81.8133549192311 L 265.2196938155332,82.57098430901742 L 262.7682504466268,78.54671672199473 L 264.0353094404091,77.74387084246658 ">
		</path>
      <path fill="rgb(249,119,31)" fill-opacity="1" stroke="rgb(249,119,31)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 266.51429711683136,81.8133549192311 L 268.84812248786733,85.96779106489542 L 267.5275877935577,86.67926005306325 L 265.2196938155332,82.57098430901742 L 266.51429711683136,81.8133549192311 ">
		</path>
      <path fill="rgb(250,111,29)" fill-opacity="1" stroke="rgb(250,111,29)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 268.84812248786733,85.96779106489542 L 271.0338778977218,90.20200336934889 L 269.6890570321916,90.86642555413391 L 267.5275877935577,86.67926005306325 L 268.84812248786733,85.96779106489542 ">
		</path>
      <path fill="rgb(250,103,27)" fill-opacity="1" stroke="rgb(250,103,27)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 271.0338778977218,90.20200336934889 L 273.0688401673331,94.51071653132104 L 271.7014086099183,95.12726412541747 L 269.6890570321916,90.86642555413391 L 271.0338778977218,90.20200336934889 ">
		</path>
      <path fill="rgb(250,95,25)" fill-opacity="1" stroke="rgb(250,95,25)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 273.0688401673331,94.51071653132104 L 274.95047398711483,98.88856243075008 L 273.562135387258,99.45646729263063 L 271.7014086099183,95.12726412541747 L 273.0688401673331,94.51071653132104 ">
		</path>
      <path fill="rgb(251,87,23)" fill-opacity="1" stroke="rgb(251,87,23)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 274.95047398711483,98.88856243075008 L 276.676435075636,103.33008681679192 L 275.26891913035115,103.84864140771646 L 273.562135387258,99.45646729263063 L 274.95047398711483,98.88856243075008 ">
		</path>
      <path fill="rgb(251,79,21)" fill-opacity="1" stroke="rgb(251,79,21)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 276.676435075636,103.33008681679192 L 278.2445731003038,107.82975610313781 L 276.8196333991893,108.29831436865851 L 275.26891913035115,103.84864140771646 L 276.676435075636,103.33008681679192 ">
		</path>
      <path fill="rgb(252,71,19)" fill-opacity="1" stroke="rgb(252,71,19)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 278.2445731003038,107.82975610313781 L 279.65293435641024,112.38196426217357 L 278.21234619689454,112.79994243703831 L 276.8196333991893,108.29831436865851 L 278.2445731003038,107.82975610313781 ">
		</path>
      <path fill="rgb(252,63,17)" fill-opacity="1" stroke="rgb(252,63,17)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 279.65293435641024,112.38196426217357 L 280.8997642012049,116.98103980939203 L 279.4453223767471,117.34791714484322 L 278.21234619689454,112.79994243703831 L 279.65293435641024,112.38196426217357 ">
		</path>
      <path fill="rgb(252,55,15)" fill-opacity="1" stroke="rgb(252,55,15)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 280.8997642012049,116.98103980939203 L 281.98350923996145,121.62125286935643 L 280.5170258039619,121.93657228191913 L 279.4453223767471,117.34791714484322 L 280.8997642012049,116.98103980939203 ">
		</path>
      <path fill="rgb(253,47,13)" fill-opacity="1" stroke="rgb(253,47,13)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 281.98350923996145,121.62125286935643 L 282.90281926131377,126.29682231441171 L 281.4261212695214,126.5601909553627 L 280.5170258039619,121.93657228191913 L 281.98350923996145,121.62125286935643 ">
		</path>
      <path fill="rgb(253,40,10)" fill-opacity="1" stroke="rgb(253,40,10)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 282.90281926131377,126.29682231441171 L 283.6565489194513,131.00192296724978 L 282.1714761536797,131.21301271205812 L 281.4261212695214,126.5601909553627 L 282.90281926131377,126.29682231441171 ">
		</path>
      <path fill="rgb(253,32,8)" fill-opacity="1" stroke="rgb(253,32,8)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 283.6565489194513,131.00192296724978 L 284.2437591610776,135.73069285835496 L 282.7521618370656,135.88924071548433 L 282.1714761536797,131.21301271205812 L 283.6565489194513,131.00192296724978 ">
		</path>
      <path fill="rgb(254,24,6)" fill-opacity="1" stroke="rgb(254,24,6)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 284.2437591610776,135.73069285835496 L 284.6637183953531,140.47724052928803 L 283.167454857627,140.58304896785148 L 282.7521618370656,135.88924071548433 L 284.2437591610776,135.73069285835496 ">
		</path>
      <path fill="rgb(254,16,4)" fill-opacity="1" stroke="rgb(254,16,4)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 284.6637183953531,140.47724052928803 L 284.9159034053671,145.23565237270992 L 283.4168378119741,145.2885895685687 L 283.167454857627,140.58304896785148 L 284.6637183953531,140.47724052928803 ">
		</path>
      <path fill="rgb(255,8,2)" fill-opacity="1" stroke="rgb(255,8,2)" stroke-opacity="1" stroke-width="1" stroke-dasharray="" d="M 284.9159034053671,145.23565237270992 L 285,150 L 283.5,150 L 283.4168378119741,145.2885895685687 L 284.9159034053671,145.23565237270992 ">
		</path>
    </g>
  </svg>
  <div class="ruler-text"></div>
  <div class="absolute ruler-title">总功率</div>
  <img src="img/power.png">
  <div class="absolute kedu-text-container" id="kedu-text"></div>
</div>
<input type="text" id="zz" value="555.528" placeholder=" 输入数值改变仪表盘">



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 切换按钮 表单 表单美化 表单插件 表单美化插件 文本框 text文本框
×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到