I have attached a jsfiddle sample where the SVG works fine but when I add it to my angular html both circles are appearing at different places.
<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>
working example https://jsfiddle.net/7104bgz3/
Angular example - where it's not working https://stackblitz.com/edit/angular-sq1dwb
How to make it work exactly like jsfiddle example?
Any help would be appreciated!
The problem is in the viewBox attribute: in the second example you wrote viewbox (lowercase b)
That attribute is case sensitive and a typo doesn't properly create the dimension (and coordinates) of the SVG viewport.
As a side note, I voted to close this question, because the problem is due to a typo.