我創建了一個 svg 圓形進度條。
但是當我在我的角度組件 html 中放置相同的 svg 時，它會失去對齊。 
這是代碼：
<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>我不確定我做錯了什么。請幫忙。
我已在沙箱中添加了代碼段。這是鏈接 - https://codesandbox.io/s/blissful-johnson-yo19y?file=/src/app/app.component.css
相同的片段在 html 中作業正常。
uj5u.com熱心網友回復：
問題是viewbox屬性的名稱是錯誤的。應該是viewBox。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/405435.html
標籤：
下一篇：在HTML中顯示svg檔案