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

Question

我附上了一个 SVG 工作正常的 jsfiddle 示例，但是当我将它添加到我的 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 示例一样工作？

如有任何帮助，我们将不胜感激！

Answer 1

问题出在viewBox属性中：在第二个例子中你写了viewbox（小写b）

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

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

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

How to append one circle on top of another in SVG?

css

svg

css-transitions

css-transforms