Как добавить один кружок поверх другого в SVG?

Question

Я приложил пример jsfiddle, где SVG работает нормально, но когда я добавляю его в свой угловой 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/

Угловой пример - где он не работает https://stackblitz.com/edit/angular-sq1dwb

Как заставить его работать так же, как пример jsfiddle?

Любая помощь будет принята с благодарностью!

Answer 1

Проблема в атрибуте viewBox: во втором примере вы написали viewbox (в нижнем регистре b)

Этот атрибут чувствителен к регистру, и опечатка неправильно создает измерение (и координаты)) окна просмотра SVG.

В качестве примечания я проголосовал за закрытие этого вопроса, поскольку проблема связана с опечаткой.