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(1.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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