我附上了一个 jsfiddle 示例，其中 SVG 工作正常，但是当我将它添加到我的 Angular html 时，两个圆圈都出现在不同的地方。
<svg class="circle-chart" viewbox="0 0 33.83098862 33.83098862" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle class="circle-chart__background" stroke="#efefef" stroke-width="2" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431" />
<circle class="circle-chart__circle" stroke="#00acc1" stroke-width="2" stroke-dasharray="30,100" stroke-linecap="round" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431" />
</svg>
工作示例 https://jsfiddle.net/7104bgz3/
Angular 示例 - 它不起作用的地方 https://stackblitz.com/edit/angular-sq1dwb
如何让它像 jsfiddle 示例一样工作？
如有任何帮助，我们将不胜感激!
最佳答案
问题出在 viewBox 属性中:在第二个示例中，您编写了 viewbox(小写 b)
该属性区分大小写，打字错误无法正确创建 SVG 视口(viewport)的尺寸(和坐标)。
作为旁注，我投票结束了这个问题，因为这个问题是由于打字错误造成的。
关于css - 如何在 SVG 中将一个圆圈附加到另一个圆圈之上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58727271/