jquery+svg实现功率仪表板数字输入显示效果代码
代码语言：html
所属分类：图表
代码描述：jquery+svg实现功率仪表板数字输入显示效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body{
background: black;
font-family: 'Impact';
}
.kedu{
transform-origin: 0px 0px;
align-items: stretch;
align-content: flex-start;
padding: 0px; width: 300px; height: 161px;
margin:40px auto 0 auto;
transform: translate(0px, 0px) scale(1, 1);
}
.ruler-text{
position: absolute;
bottom:-8px;
left: 50%;
flex: 0 0 auto;
position: absolute;
overflow: visible;
border: 1px solid rgba(255, 255, 255, 0);
line-height: 24px;
font-size: 24px;
font-weight: bold;
color: white;
justify-content: center;
text-align: center;
align-items: center;
letter-spacing: 0px;
padding: 0px;
border-radius: 0px;
white-space: pre;
z-index: 0;
}
.ruler-text span{
font-size: 12px;
color:rgb(255, 126, 71);
margin-left: 0.2rem;
}
.ruler{
border-width: 0px;
align-items: stretch;
align-content: flex-start;
padding: 0px;
width: 300px;
height: 300px;
overflow: hidden;
}
.kedu-text{
border-width: 0px;
align-items: stretch;
align-content: flex-start;
padding: 0px;
width: 300px;
height: 300px;
overflow: visible;
}
.ruler-deg{
border-width: 0px;
align-items: stretch;
align-content: flex-start;
padding: 0px;
width: 4px;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
height: 10px;
top: 0px;
overflow: hidden;
}
.ruler-bg{
background: rgb(36, 39, 46);
}
.ruler-active{
background: #F18455;
}
.absolute{
position: absolute;
}
#kedu img{
position: absolute;
width: 12px;
left: 144px;
height: 20px;
top: 74px;
z-index: 3;
background: rgba(255, 255, 255, 0);
border: 1px solid rgba(255, 255, 255, 0);
width: 12px;
}
.kedu-text-item{
overflow: visible;
opacity: 0.5;
border: 1px solid rgba(255, 255, 255, 0);
font-size: 18px;
font-weight: normal;
color: rgb(255, 255, 255);
justify-content: center;
text-align: center;
align-items: center;
letter-spacing: 0px;
padding: 0px;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
top: 10px;
border-radius: 0px;
white-space: pre;
}
.kedu-text-container{
transform-origin: 0px 0px;
align-items: stretch;
align-content: flex-start;
left: 10%;
padding: 0px;
width: 80%;
height: 161px;
bottom: 0;
transform: translate(0px, 16px) scale(0.796667, 0.796667);
}
.ruler-title{
border: 1px solid rgba(255, 255, 255, 0);
font-size: 14px;
font-weight: normal;
color: rgb(149, 152, 158);
justify-content: center;
text-align: center;
align-items: center;
letter-spacing: 0px;
padding: 0px;
left: 50%;
bottom:0;
border-radius: 0px;
white-space: pre;
z-index: 1;
}
#zz{position: fixed;
top: 250px;
left: 50%;
margin-left: -150px;
width:300px;
height:30px;
line-height:30px;
}
</style>
</head>
<body>
<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=&qu.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0