如何使用 SVG 创建圆形进度条？

SVG（Scalable Vector Graphics）是一种基于 XML 的标记语言，用于描述二维结构化图形。在 Web 开发中，SVG 可以创建各种复杂的图形效果，其中之一就是圆形进度条。

实现步骤

1. 搭建 HTML 结构

首先，我们需要在 HTML 中创建一个 SVG 元素，同时定义圆形进度条的半径、边框宽度、图形变换等属性。例如：

<svg class="progress" viewBox="0 0 100 100" width="200" height="200">
  <circle class="progress-ring" cx="50" cy="50" r="40" stroke-width="6" />
  <text class="progress-text" x="50" y="50" text-anchor="middle" dominant-baseline="central">0%</text>
</svg>

上面代码中，我们创建了一个 id 为 progress 的 SVG 元素，并设置了 viewBox 为 0 0 100 100，width 和 height 为 200，表示 SVG 的尺寸是 200x200。其中，circle 元素表示圆形进度条，cx 和 cy 属性表示圆心坐标，r 属性表示半径，stroke-width 属性表示边框宽度，初始值为 6。text 元素表示进度文字，x 和 y 属性表示文字位置，text-anchor 表示文字对齐方式，dominant-baseline 表示文字基线。

2. 定义 CSS 样式

接着，我们需要对圆形进度条和进度文字进行样式设置。例如：

.progress {
  display: block;
  margin: 0 auto;
}

.progress-ring {
  fill: transparent;
  stroke: #e6e6e6;
  stroke-dasharray: 251; /* 2πr ≈ 251 */
  stroke-dashoffset: 0;
  transform: rotate(-90deg);
  transition: stroke-dashoffset 0.5s ease-in-out;
}

.progress-ring.active {
  stroke: #00bcd4;
}

.progress-text {
  font-size: 24px;
  font-weight: bold;
  fill: #333;
  transition: fill 0.5s ease-in-out;
}

.progress.active .progress-ring {
  stroke-dashoffset: calc(251 - (251 * var(--progress) / 100));
}

.progress.active .progress-text {
  fill: #fff;
}

上面代码中，我们通过样式设置了 SVG 的宽度、边距等属性，同时对圆形进度条和文字进行了样式设置。其中，fill 属性表示填充颜色，transparent 表示透明色。stroke 属性表示边框颜色。stroke-dasharray 属性表示边框线段的长度和间隔，251 表示边框周长。stroke-dashoffset 属性表示边框偏移量，初始值为 0，表示进度为 0。transform 属性表示图形变换，rotate(-90deg) 表示旋转 -90 度，将圆形进度条的起点从 3 点钟方向开始。transition 属性表示属性动画过渡效果，stroke-dashoffset 0.5s ease-in-out 表示进度条动画效果。

3. JavaScript 控制进度

最后，我们需要使用 JavaScript 控制圆形进度条的进度。例如：

const progress = document.querySelector('.progress');
const progressRing = document.querySelector('.progress-ring');

let percent = 0;
const interval = setInterval(() => {
  percent += Math.random() * 10;
  if (percent >= 100) {
    percent = 100;
    clearInterval(interval);
  }
  progress.style.setProperty('--progress', percent);
  progressRing.classList.add('active');
  progress.classList.add('active');
}, 500);

上面代码中，我们通过 querySelector 方法获取了 SVG 元素和圆形进度条元素。然后，定义了一个 percent 变量，表示进度百分比，初始值为 0。同时，使用 setInterval 方法定时更新进度，并控制进度条的动画效果。

总结

通过以上步骤，我们就可以创建一个基于 SVG 的圆形进度条。其中，HTML 结构包含 SVG 元素和 circle、text 元素。CSS 样式定义了圆形进度条和进度文字的样式，控制了边框线段长度、偏移量等。JavaScript 控制了进度百分比，并控制了进度条的动画效果。