gpt4 book ai didi

html - 在 svg 或 css 中创建圆形进度条

转载 作者:行者123 更新时间:2023-11-28 05:12:04 26 4
gpt4 key购买 nike

<分区>

我尝试设计一个圆形进度条,里面有一些信息。像这样的东西。 enter image description here

我有 svg 但我也不能写在圆圈内。起点和终点距离很低。我正在寻找类似图像的东西。

svg {
height: 200px;
margin: auto;
display: block;
}

path {
stroke-linecap: round;
stroke-width: 2;
}

path.grey {
stroke: lightgrey;
}

path.purple {
stroke: purple;
stroke-dasharray: calc(40 3.142 1.85);
stroke-dashoffset: 80;
/ adjust last number for variance /
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 100 100">
<path class="grey" d="M40,90
A40,40 0 1,1 70,90"
style="fill:none;"/>
<path class="purple" d="M40,90
A40,40 0 1,1 70,90"
style="fill:none;"/>
</svg>

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com