利用svg实现渐变仪表盘进度条

公告

随笔档案

阅读排行榜

评论排行榜

View Post

1 使用circle画圆环，利用animate实现动画效果，利用defs定义渐变色，stroke-dasharray 属性，这是一个用来控制路径虚线疏密程度的属性，其值是一组描述虚线的短划线与空白间隙长度的数列。例如，如果设置 stroke-dasharray="5 2"，则路径将以 5 个像素的短划线和 2 个像素的空白间隙交替显示，其中第一个数控制短划线长度，第二个数控制空白间隙长度。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .progress-circle {
     width: 200px;
     height: 200px;
     --percent: 75;  /* 百分数 */
     --size: 180px;  /* 尺寸大小 */
     --border-width: 15px;  /* 环形宽度（粗细） */
     --color: #7856d7;  /* 主色 */
     --inactive-color: #ccc;  /* 辅助色 */
     width: var(--size);
     height: var(--size);
     transform: rotate(135deg);
     border-radius: 50%;
   }
    
   .progress-circle > circle {
     cx: calc(var(--size) / 2);
     cy: calc(var(--size) / 2);
     r: calc((var(--size) - var(--border-width)) / 2);
     fill: none;
     stroke-width: var(--border-width);
     stroke-linecap: round;
   }
   </style> 
</head>
<body>
   <svg class="progress-circle">
     <circle stroke="var(--inactive-color)" style="stroke-dasharray: calc(
       2 * 3.1415 * (var(--size) - var(--border-width)) / 2 * 
       (var(--percent) / 100)
     ), 1000"/>
     <circle stroke="url(#Gradient01)"
       style="stroke-dasharray: calc(
         2 * 3.1415 * (var(--size) - var(--border-width)) / 2 * 
         (var(--percent) / 100)
       ), 1000"
     >
     <!-- 388.575 stroke-dasharray 计算的值  -->
     <animate
       attributeName="stroke-dasharray"
       values="0;388.575;388.575"
       dur="2s"
     />
   </circle>
   </svg>
 
   <svg xmlns="http://www.w3.org/2000/svg">
     <defs>
       <linearGradient id="Gradient01">
         <stop offset="20%" stop-color="#39F" />
         <stop offset="90%" stop-color="#F3F" />
       </linearGradient>
     </defs>
   </svg>
</body>
</html>