SVG进度栏以75的圆为刻度虚线

Question

自2天以来，我一直在一个问题上陷入困境。我会尽力做到这一点，但这就是结果应该是这样的：

我目前不知道该怎么做，我将尝试从硬编码值开始，然后尝试将圆圈百分比与实际值匹配。 （不要介意中间的圆圈，我待会再做）

这是我直到现在的来源，这没有任何意义，但这是我发现绕75％的唯一方法：

svg {
  margin: 15px;
}

.loader {
    stroke: red;
    stroke-width: 6;
    stroke-dasharray: 258;
    transform-origin: center;
    transform: rotate(135deg);
    fill: transparent;
}
.loader.grey {
    stroke: #c1c1c1;
}

<svg class="loader-svg" width="110" height="110" viewBox="0 0 130 130">
  <circle
    class="loader grey"
    cx="65"
    cy="65"
    r="55"
  ></circle>
</svg>

编辑：我也需要精确的10个破折号，并且不需要设置动画

Answer 1

您可以尝试以下方法：

svg {
  margin: 15px;
}

.loader {
    stroke: red;
    stroke-width: 6;
    stroke-dasharray: 262,350; /*75%*/
    transform-origin: center;
    transform: rotate(135deg);
    fill: transparent;
    animation:change 5s linear infinite alternate;
}
.loader.grey {
    stroke: #c1c1c1;
}

@keyframes change {
  from{stroke-dasharray: 0,350;} /*0%*/
  to{stroke-dasharray: 350,350;} /*100%*/
}

<svg class="loader-svg" width="110" height="110" viewBox="0 0 130 130">
  <circle
    class="loader grey"
    cx="65"
    cy="65"
    r="55"
  ></circle>
</svg>

对于破折号，只需在顶部添加另一个圆圈：

svg {
  margin: 15px;
}

.loader {
    stroke: red;
    stroke-width: 6;
    stroke-dasharray: 262,350; /*75%*/
    transform-origin: center;
    transform: rotate(135deg);
    fill: transparent;
    animation:change 5s linear infinite alternate;
}
.loader.grey {
    stroke: #c1c1c1;
}
.dash {
 stroke: #fff;
    stroke-width: 6;
    stroke-dasharray: 17; /*adjust this to control the dashes*/ 
    transform-origin: center;
    transform: rotate(135deg);
    fill: transparent;
}

@keyframes change {
  from{stroke-dasharray: 0,350;} /*0%*/
  to{stroke-dasharray: 350,350;} /*100%*/
}

<svg class="loader-svg" width="110" height="110" viewBox="0 0 130 130">
  <circle
    class="loader grey"
    cx="65"
    cy="65"
    r="55"
  ></circle>
  <circle
    class="dash"
    cx="65"
    cy="65"
    r="55"
  ></circle>
</svg>