Css SVG<；圆圈>；填补上一圈的空白

我正在构建一个svg循环进度图

我正在尝试设置svg笔划的样式，以匹配circle.center的可见部分，但当我更改circle.progress的笔划时，它不会将圆的填充缩小到足以显示circle.progress的黑色部分并匹配实际进度条的宽度

<svg width="300" height="300">
    <circle class="progress" id="progress-radial-1" r="125"/>
    <circle class="center" r="140" cx="140" cy="140" />
    <text text-anchor="middle" x="150" y="185" />
</svg>

这是一把小提琴：

以下是svg的结果（左）：

---

我正在努力得到正确的结果。如您所见，控制蓝色进度条（50%）的circle.center也有一个填充，在图像中为白色（小提琴中为灰色），并且覆盖了太多的黑色svg笔划。我需要笔划与蓝色的宽度相同。

中心

和

进度

圆圈具有不同的原点，应该具有相同的原点（现在设置为150）

中心

的半径现在比

进度

小25 px，以适应其行程

因此，如果您像这样更新标记，将

中心的填充更改为
#ddd
，并将
svg
背景更改为
#000
，您将获得所需的布局

<div class="pie-wrapper">
  <svg width="300" height="300">
    <circle class="progress" id="pr1" r="125" cx="150" cy="150"/>
    <circle class="center" r="100" cx="150" cy="150" />
    <text text-anchor="middle" x="150" y="175" />
  </svg>
</div>

.pie包装器{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.馅饼包装器{
背景：#000；
边界半径：50%；
}
.进展{
笔画宽度：50；
变换：旋转（-90度）；
变换原点：50%50%；
}
.中心{
填充：#ddd；
}
正文{
填充：#fff；
字体系列：“共享技术单声道”；
字号：80px；
}

谢谢你的精彩回答@LGSon。然而，如果你再次看到我的小提琴（更新），SVG#333似乎仍然是全黑色部分宽度的一半。（仍然无法理解是什么在控制它）我希望如果可能的话把梯度放进去，所以我假设需要正确对齐它们。@BenRacicot笔划的宽度跨度是圆的一半，一半在外，所以笔划的宽度中心在圆的中心edge@BenRacicot添加渐变，如果它们表现不好，给我发张便条，我会有一个look@BenRacicot如果你检查这把小提琴，在那里我除去了除
progress
圆圈以外的所有圆圈，你会看到笔划的表现。我把它装满了红色，所以它显示了发生了什么on@FrankWisniewski我检查过了，他们的旋转方式不同，虽然我在这里解决了笔划问题，旋转问题是新的问题和答案