SVG is working on plain HTML file but loses alignment when integrated in Angular-CodePudding

I have created an svg circular progress bar.

But when I am putting the same svg in my angular component html it is losing its alignment.

Here is the code:

<svg  viewbox="0 0 35.83098862 35.83098862" width="60" height="60" xmlns="http://www.w3.org/2000/svg">
    <circle  stroke="#d3d7dd" stroke-width="4" fill="none" cx="17.91549431" cy="17.91549431" r="15.91549431" />
    <circle  style="transform:rotate(-90deg);transform-origin: center;" stroke="#222" stroke-width="4" stroke-dasharray="80,100" stroke-linecap="round" fill="none" cx="17.91549431" cy="17.91549431" r="15.91549431" />
    <text  data-name="20%" transform="translate(9 20)" font-size="7.5" font-family="Graphik-Semibold, Graphik" font-weight="600" style="mix-blend-mode: normal;isolation: isolate"><tspan x="0" y="0">80%</tspan></text>
</svg>

I am not sure what I am doing wrong. Please help.

I have added the snippet in the sandbox. Here is the link - https://codesandbox.io/s/blissful-johnson-yo19y?file=/src/app/app.component.css

Same snippet works fine in html.

CodePudding user response：

The problem is that the name of the viewbox attribute is wrong. It should be viewBox.