尝试重新创建这个半圆

如何解决尝试重新创建这个半圆

过去几天，我一直在尝试重新创建半圈。但是我在从哪里开始遇到麻烦。

我创建了一个半圆。但是我需要的是如何添加点（较小的圆圈）。

非常感谢您的帮助！

String

SCSS

<div class="container">
  <div id="npsbar"></div>
  <span>0</span>
  <span>10</span>
</div>

JS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
 
  position: relative;
  
    #npsbar {
    margin: 20px;
    width: 200px;
    height: 100px;
  }
  
  span {
    position: absolute;
    bottom: 0;
    right: 20px;
        
    &:nth-child(2) {
      bottom: 0;
      left: 25px;
    }
  }
}

解决方法

请尝试这个

#container {
  width: 200px;
  height: 100px;
}
svg{
  height: 120px;
  width: 200px;
  fill: none;
}
svg path{
  stroke: #ffc23b;
  stroke-width: 10;
  stroke-linecap: round;
}

<div id="container">
  <svg viewBox="0 0 100 50">
    <path d="M 50,50 m -45,0 a 45,45 0 1 1 90,0"></path>
    <rect fill="#fff" height="50" width="50" x="81" y="18"></rect>
    <circle cy="50" r="5" fill="#c9c9c9" cx="95"></circle>
    <circle r="5" fill="#c9c9c9" cy="35" cx="93"></circle>
    <circle r="5" fill="#ffc23b" cy="21" cx="84.5"></circle>
    <use xlink:href="#one"/>
  </svg>
</div>

,

您可以使用以下CSS将背景线转换为球形：

{
stroke-width: 10;
stroke-dasharray: 0 14; /* <-- if you change this 14 to any other value,you can change the number of "balls" */
stroke-dashoffset: 4;
}

对于您的ProgressBar库，它将是：

bar.trail.setAttribute('stroke-width','10');
bar.trail.setAttribute('stroke-dasharray','0 14');
bar.trail.setAttribute('stroke-dashoffset','4');

示例：https://codepen.io/antoncodepen/pen/vYGmqOP