使用progressbar.js实现带内部图片、环上文字的环形进度条求助

问题原因 #

你将HTML的span元素直接插入到了SVG标签内部，SVG本身不支持直接解析渲染普通HTML元素，因此文字无法正常显示。

解决方案 #

无需修改进度条核心逻辑，采用容器层叠布局实现内部居中内容、侧边文字即可，完美居中实现成本很低，不会出现重叠问题：

修正后完整代码 #

HTML

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<div id="container">
  <!-- 内部内容层，覆盖在进度条上方 -->
  <div class="progress-content">
    <img src="替换为你的图片地址" alt="进度图标" class="progress-img">
    <span class="progress-percent">100%</span>
  </div>
  <!-- 侧边文字层，可自行调整位置 -->
  <div class="progress-side-text">已完成</div>
</div>

CSS

#container {
  margin: 20px;
  width: 200px;
  height: 200px;
  position: relative;
}
/* 内部内容层：全屏覆盖容器，flex实现完美居中 */
.progress-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 可选：如果需要保留进度条的交互事件，加这行避免内容层拦截事件 */
  pointer-events: none;
}
.progress-img {
  width: 60px;
  height: 60px;
  margin-bottom: 8px;
}
.progress-percent {
  font-size: 16px;
  color: #333;
}
/* 侧边文字：自行调整偏移量适配需求 */
.progress-side-text {
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #666;
}

JS

var bar = new ProgressBar.Circle(container, {
  strokeWidth: 20,
  easing: 'easeInOut',
  duration: 1400,
  color: 'url(#gradient)',
  trailColor: '#eee',
  trailWidth: 1,
  svgStyle: null
});
let linearGradient = `
  <defs>
    <linearGradient id="gradient" x1="100%" y1="0%" x2="0%" y2="0%" gradientUnits="userSpaceOnUse">
      <stop offset="20%" stop-color="mediumaquamarine"/>
      <stop offset="50%" stop-color="turquoise"/>
    </linearGradient>
  </defs>
`
bar.svg.insertAdjacentHTML('afterBegin', linearGradient);
// 删掉原本插入span的代码，内容已经在HTML中定义
bar.animate(1.0);

其他可选库推荐 #

• 通用场景可以使用G2Plot，内置环形进度图组件，支持直接配置中心内容、侧边标注，无需手动写布局逻辑
• 如果你使用Vue/React等前端框架，对应的组件库（Element UI、Ant Design等）都自带成熟的环形进度条组件，开箱即用

内容的提问来源于stack exchange，提问作者Elias Khazzaka