如何在 SVG 中将一个圆圈附加到另一个圆圈之上？答案

【问题标题】：How to append one circle on top of another in SVG?如何在 SVG 中将一个圆圈附加到另一个圆圈之上？
【发布时间】：2020-03-02 18:24:50
【问题描述】：

我附上了一个 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

标签： css svg css-transitions css-transforms

【解决方案1】：

问题出在viewBox 属性中：在第二个示例中，您编写了视图框（小写b）

该属性区分大小写，并且拼写错误无法正确创建SVG 视口的维度（和坐标）。

作为旁注，我投票结束了这个问题，因为这个问题是由于一个错字造成的。

【讨论】：

@fcalderan 感谢您的快速解决方案。如果其他人有同样的问题怎么办？我认为这会对某人有所帮助。