如何在React中为ProgressBar.js半圆进度条添加圆形端点

要实现带有圆形端点的半圆进度条，只需要给进度条的SVG路径设置stroke-linecap="round"属性即可，progressbar.js提供了两种简单的实现方式：

方式一：在配置的svgStyle中直接添加 #

直接在初始化配置的svgStyle对象里加入strokeLinecap: "round"，这会直接作用于进度条的线条：

new ProgressBar.SemiCircle(`#container-${id}`, {
      strokeWidth: 10,
      trailColor: "#191C26",
      trailWidth: 10,
      easing: "easeInOut",
      duration: 1400,
      svgStyle: {
        stroke: "#"+randomColor,
        strokeLinecap: "round" // 新增：设置圆形端点
      },
      text: {
        value: "",
        alignToBottom: false,
      },

      step: (state, bar) => {
        bar.path.setAttribute("stroke", state.color); 
      },
    });

bar.animate(meter);

方式二：在step函数中动态设置 #

如果需要在动画过程中动态控制端点样式，可以在step函数里给路径元素设置stroke-linecap属性：

new ProgressBar.SemiCircle(`#container-${id}`, {
      strokeWidth: 10,
      trailColor: "#191C26",
      trailWidth: 10,
      easing: "easeInOut",
      duration: 1400,
      svgStyle: {
        stroke: "#"+randomColor,
      },
      text: {
        value: "",
        alignToBottom: false,
      },

      step: (state, bar) => {
        bar.path.setAttribute("stroke", state.color); 
        bar.path.setAttribute("stroke-linecap", "round"); // 新增：设置圆形端点
      },
    });

bar.animate(meter);

可选：给轨迹（Trail）也添加圆形端点 #

如果希望背景轨迹也带有圆形端点，可以在配置中加入trailStyle对象并设置相同属性：

new ProgressBar.SemiCircle(`#container-${id}`, {
      strokeWidth: 10,
      trailColor: "#191C26",
      trailWidth: 10,
      trailStyle: {
        strokeLinecap: "round" // 给背景轨迹添加圆形端点
      },
      easing: "easeInOut",
      duration: 1400,
      svgStyle: {
        stroke: "#"+randomColor,
        strokeLinecap: "round"
      },
      text: {
        value: "",
        alignToBottom: false,
      },

      step: (state, bar) => {
        bar.path.setAttribute("stroke", state.color); 
      },
    });

bar.animate(meter);

stroke-linecap: round是SVG的标准属性，它会让线条的两端呈现平滑的圆形，完全符合你需要的端点样式。

内容的提问来源于stack exchange，提问作者Gehan Pasindhu