有没有办法使用行程破折号阵列制作 svg 圆形进度条？ [已关闭]

Question

我一直在尝试重新创建这个进度条，但我一直坚持可以实现线之间的破折号的步骤。如果您有任何想法那就太好了。

这就是我迄今为止所取得的成就。

我使用了react-move库来制作时钟动画

<CircularProgressbar
  value={value}
  text={`${roundedValue}%`}
  circleRatio={0.75}
  styles={buildStyles({
    rotation: 1 / 2 + 1 / 8,
    strokeLinecap: "butt",
    trailColor: "#eee",
  })}
/>

Answer 1

您可以使用圆圈（如本例中所示）或带有 lines-dasharray 的路径，并将其与 mask 组合。

document.forms.form01.meter.addEventListener('change', e => {
  document.querySelector('#m3 circle')
    .setAttribute('stroke-dasharray', `${parseInt(e.target.value) + 1} 120`);
  document.querySelector('#gauge')
    .setAttribute('transform', `rotate(${parseInt(e.target.value) * 3})`);
  document.querySelector('#text').innerHTML = `${e.target.value}%`;
});

body {
  background-color: #191919;
  display: flex;
}

<form name="form01">
  <input type="range" name="meter" min="0" max="90" value="15" step="1">
</form>
<svg xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 100 100">
  <defs>
  <filter id="blur1">
    <feGaussianBlur stdDeviation=".2" />
  </filter>
  <filter id="shadow2">
      <feDropShadow dx="0" dy="0" stdDeviation=".6" flood-color="#4ebcc4" />
    </filter>
    <mask id="m1">
      <circle r="40" stroke="white" stroke-width="50"
        fill="none" stroke-dasharray="91 30" pathLength="120" />
    </mask>
    <mask id="m3">
      <circle r="40" stroke="white" stroke-width="30"
        fill="none" stroke-dasharray="15 120" pathLength="120" />
    </mask>
    <mask id="m2">
      <circle r="14" stroke="white" stroke-width="6"
        fill="none" pathLength="120" />
     <circle r="14" transform="scale(.9) translate(2 0)" stroke="black" stroke-width="6"
       fill="none" pathLength="120" />
    </mask>
  </defs>
  <g transform="translate(50 50) rotate(135)"  mask="url(#m1)" filter="url(#blur1)">
    <circle r="46" stroke="#4ebcc4" stroke-width="1.5"
      fill="none" stroke-dasharray=".6 14.4" pathLength="120" />
    <circle r="40" stroke="#005a96" stroke-width="7"
      fill="none" stroke-dasharray="1 1" pathLength="120" />
      
    <circle r="40" stroke="#235e6b" stroke-width="7" mask="url(#m3)"
      fill="none" stroke-dasharray="1 1" pathLength="120" />
      
    <circle r="33" stroke="#4ebcc4" stroke-width="2"
      fill="none" pathLength="120" />
    <circle r="30" stroke="#4ebcc4" stroke-width="5"
      fill="none" stroke-dasharray=".5 14.6" pathLength="120" />
    <circle r="14" mask="url(#m2)" stroke="#4ebcc4" stroke-width="6"
     fill="none" pathLength="120" />
  </g>
  <g transform="translate(50 50)" filter="url(#blur1)">
    <circle r="24" stroke="#4ebcc4" stroke-width="3"
      fill="none" stroke-dasharray=".1 2.9" pathLength="120" />
    <text id="text" font-size="10" font-family="sans-serif"
      fill="#4ebcc4" stroke="none" text-anchor="middle"
      dominant-baseline="middle" filter="url(#shadow2)">15%</text>
    <g id="gauge" transform="rotate(45)">
      <path transform="rotate(-135) translate(0 -15)"
        d="M -2.5 0 A 1 1 0 0 0 2.5 0 L 0 -6 L -2.5 0" fill="#4ebcc4" />
    </g>
  </g>
</svg>