Html 带内冲程的圆形进度条

我正试图构建一个循环百分比图，如下所示：

目前，我有以下几点：

HTML:

如上图所示，我找不到在另一个圆圈内“绘制”彩色圆圈的方法。我不太精通SVG。有没有简单的解决办法？我使用的一些SVG属性

谢谢

您需要重写第二条路径，使圆的半径小2个单位（stroke width=“3”-stroke width=“1”）

现在的问题是，动画路径的长度较小，因此您也需要更改动画

正文{
背景色：#000；
}
.圆图{
显示：块；
利润率：10px自动；
最大宽度：256px；
}
.外圆{
填充：无；
行程：3c；
笔画宽度：1；
}
.圆圈{
填充：无；
冲程：#17E68F；
笔画宽度：3；
行程数组：093.73；
动画：前进1秒，向前放松；
}
@关键帧进度{
100% {
行程：46.86；
}
}
.百分比{
填充：#666；
字体大小：0.5em；
文本锚定：中间；
}

您需要重写第二条路径，使圆的半径小2个单位（stroke width=“3”-stroke width=“1”）

现在的问题是，动画路径的长度较小，因此您也需要更改动画

正文{
背景色：#000；
}
.圆图{
显示：块；
利润率：10px自动；
最大宽度：256px；
}
.外圆{
填充：无；
行程：3c；
笔画宽度：1；
}
.圆圈{
填充：无；
冲程：#17E68F；
笔画宽度：3；
行程数组：093.73；
动画：前进1秒，向前放松；
}
@关键帧进度{
100% {
行程：46.86；
}
}
.百分比{
填充：#666；
字体大小：0.5em；
文本锚定：中间；
}

你好。在

中使用上述代码。希望它能解决您的问题。

---

你好。在

中使用上述代码。希望它能解决您的问题。

不明白您需要什么。你的图片和例子是一样的，只是有点不同。在图中，绿色圆圈位于灰色圆圈内（我正在尝试实现的解决方案）。在本例中，绿色圆圈位于灰色圆圈的中心。您需要调整viewbox。（添加溢出：SVG可以看到问题）讨厌的小问题（总是）。SVG将笔划50%置于填充之外，50%置于填充之上。我没有解决方案，但这就是您需要搜索“SVG笔划位置外部”的内容。建议：将SVG放入

中，并制作

.圆形图{width:100%}

而不是

。圆形图{max width:256px}

并调整大小或最大

，这样，响应性设计将变得更容易。不知道你需要什么。你的图片和例子是一样的，只是有点不同。在图中，绿色圆圈位于灰色圆圈内（我正在尝试实现的解决方案）。在本例中，绿色圆圈位于灰色圆圈的中心。您需要调整viewbox。（添加溢出：SVG可以看到问题）讨厌的小问题（总是）。SVG将笔划50%置于填充之外，50%置于填充之上。我没有解决方案，但这就是您需要搜索“SVG笔划位置外部”的内容。建议：将SVG放入

中，并制作

.圆形图{width:100%}

而不是

。圆形图{max width:256px}

并调整大小或最大

，这样，响应性设计将变得更容易。这正是我所寻找的行为。谢谢这正是我想要的行为。谢谢

<svg viewBox="0 0 36 36" class="circular-chart">
  <path
    class="circle-outer"
    d="M18 2.0845
        a 15.9155 15.9155 0 0 1 0 31.831
        a 15.9155 15.9155 0 0 1 0 -31.831"
  />
  <path
    class="circle"
    stroke-dasharray="50, 100"
    d="M18 2.0845
        a 15.9155 15.9155 0 0 1 0 31.831
        a 15.9155 15.9155 0 0 1 0 -31.831"
  />
</svg>

body {
  background-color: #000;
}

.circular-chart {
  display: block;
  margin: 10px auto;
  max-width: 256px;
}

.circle-outer {
  fill: none;
  stroke: #3c3c3c;
  stroke-width: 1;
}

.circle {
  fill: none;
  stroke: #17E68F;
  stroke-width: 3;
  animation: progress 1s ease-out forwards;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

.percentage {
  fill: #666;
  font-size: 0.5em;
  text-anchor: middle;
}

<svg viewBox="0 0 36 36" class="circular-chart">
<path
class="circle-outer"
d="M18 2.0845
    a 15.9155 15.9155 0 0 1 0 31.831
    a 15.9155 15.9155 0 0 1 0 -31.831"
/>
<path
class="circle"
stroke-dasharray="70, 100"
d="M18 2.8
    a 15 15 0 0 1 0 30
    a 15 15 0 0 1 0 -30"
/>
</svg>