利用svg实现渐变仪表盘进度条
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>
具体参见：https://zhuanlan.zhihu.com/p/662139481
