SVG 正在处理纯 HTML 文件，但在集成到 Angular 中时会失去对齐

Question

我创建了一个 svg 圆形进度条。

但是当我将相同的 svg 放入我的 angular 组件 html 时，它失去了对齐。

代码如下：

<svg class="circle-chart" viewbox="0 0 35.83098862 35.83098862" width="60" height="60" xmlns="http://www.w3.org/2000/svg">
    <circle class="circle-chart__background" stroke="#d3d7dd" stroke-width="4" fill="none" cx="17.91549431" cy="17.91549431" r="15.91549431" />
    <circle class="circle-chart__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 class="circle-chart__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>

我不确定我做错了什么。请帮忙。

我已将代码段添加到沙盒中。这是 link - https://codesandbox.io/s/blissful-johnson-yo19y?file=/src/app/app.component.css

相同的代码片段在 html 中运行良好。

Answer 1

问题是viewbox属性的名字不对。应该是 viewBox.

SVG 正在处理纯 HTML 文件，但在集成到 Angular 中时会失去对齐

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

html

css

svg