圆圈 svg 中的破折号不是完整的

Question

我想为成绩创建一个虚线进度圆圈。我想让破折号的长度成为最大等级的函数。（例如：如果等级是 3.5/5，破折号将是 24px 长）。

问题是第一个破折号（右上角的破折号）没有达到想要的长度。

<svg xmlns="http://www.w3.org/2000/svg" [attr.viewBox]="_getViewBox()">

  <!-- The grey circle plain for background-->
  <path
  #background
  fill="none"
  [style.stroke-width]="stroke"
  [style.stroke]="'#EAEAEA'"
  [attr.transform]="getPathTransform()"/>

  <!-- The blue circle plain for progress -->
  <path
  #path
  fill="none"
  [style.stroke-width]="stroke"
  [style.stroke]="resolveColor(color)"
  [attr.transform]="getPathTransform()"/>

  <!-- The white dashed circle for delimitation of dashes -->
  <path
  #dash
  fill="none"
  [style.stroke-width]="stroke"
  [style.stroke]="'#ffffff'"
  stroke-dasharray="4.3,23.7"
  [attr.transform]="getPathTransform()"/>
</svg>

请注意，如果我将此值保留在最后一条路径上 > stroke-dasharray="4.3,23.7" 我会得到：

但这只是因为我遇到了半径 70 的好值。因为如果我想改变它（例如让它发挥最大等级的作用）我有这个：

我想要的是对破折号的数量和破折号的长度有一个连贯的值，我有点迷茫，我不知道该怎么做

Answer 1

在此示例中，我使用蒙版来创建 stroke-dasharray。 dasharray 是根据最大分数（总分）计算的。破折号之间总是有 5 个单位的差距（在 total/pathLength 的 1000 中）。

然后将蒙版应用于两个圆圈。灰色圆圈始终是一个完整的圆圈，DarkTurquoise 圆圈的长度取决于分数。

两个圆圈都旋转了 -90 度，因此分数 0 位于 12 o 单击。

const c1 = document.getElementById('c1');
const c2 = document.getElementById('c2');
const t1 = document.getElementById('t1');

const update = (total, score) => {
  c1.setAttribute('stroke-dasharray', `${(1000-total*5)/total} 5`);
  c2.setAttribute('stroke-dasharray', `${1000/total*score} 1000`);
  t1.textContent = `${score}/${total}`;
};

document.forms.form01.total.addEventListener('change', e => {
  let total = parseInt(e.target.value);
  let score = parseInt(e.target.form.score.value);
  e.target.form.score.setAttribute('max', total);
  if (score >= total) score = total;
  update(total, score);
});

document.forms.form01.score.addEventListener('change', e => {
  let total = parseInt(e.target.form.total.value);
  let score = parseInt(e.target.value);
  update(total, score);
});

body {
  display: flex;
}

form {
  display: flex;
  flex-direction: column;
}

<form name="form01">
  <label>Total: <input name="total" type="range" min="5" max="30" value="10"/></label>
  <label>Score: <input name="score" type="range" min="0" max="10" value="5"/></label>
</form>
<svg viewBox="0 0 100 100" width="250" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="mask01">
      <circle id="c1" cx="50" cy="50" r="40" fill="none" stroke="white" stroke-width="10" stroke-dasharray="95 5" pathLength="1000"/>
    </mask>
  </defs>
  <g transform="rotate(-90 50 50)">
  <circle mask="url(#mask01)" cx="50" cy="50" r="40" fill="none" stroke="Gainsboro" stroke-width="10" />
  <circle id="c2" mask="url(#mask01)" cx="50" cy="50" r="40" fill="none" stroke="DarkTurquoise" stroke-width="10" stroke-dasharray="500 1000" pathLength="1000" />
  </g>
  <text id="t1" x="50" y="50" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" fill="DarkTurquoise">5/10</text>
</svg>

圆圈 svg 中的破折号不是完整的

Dashes doesn't start full at the beginning in circle svg

css

svg

path

stroke

stroke-dasharray