实现上述环状分数图

描边相关知识

stroke：描边颜色

stroke-width：描边宽度，控制线条粗细

stroke-dasharray：这个属性是一组用逗号分割的数字组成的数列，每一组数字，第一个用来表示填色区域的长度，第二个用来表示非填色区域的长度。

stroke-dashoffset：表示虚线的起始偏移

fill：填充值

svg的view-box属性

就是在svg上截取一小块，放大到整个svg显示 四个参数依次为

1. 相对于svg左上角的横坐标
2. 相对于svg左上角的纵坐标
3. 截取的视区的宽度
4. 截取的视区的高度

举个例子

<svg width="200" height="200" style="border: 1px solid steelblue">
    <rect x="10" y="10" width="100" height="100" fill="skyblue"></rect>
</svg>

<svg width="200" height="200" style="border: 1px solid steelblue" viewBox="40 40 60 60">
    <rect x="10" y="10" width="100" height="100" fill="skyblue"></rect>
</svg>

图示原理 最终效果

stroke-dasharray和stroke-dashoffset具体解释

引用大佬解释

用中文解释就是，一根火腿肠12厘米，要在上面画虚线，虚线间隔有15厘米，如果没有dashoffset，则火腿肠前面15厘米会被辣椒酱覆盖！实际上只有12厘米，因此，我们看到的是整个火腿肠都有辣椒酱。现在，dashoffset也是15厘米，也就是虚线要往后偏移15厘米，结果，辣椒酱要抹在火腿肠之外，也就是火腿肠上什么辣椒酱也没有。如果换成上面的直线SVG，也就是直线看不见了。我们把dashoffset值逐渐变小，则会发现，火腿肠上的辣椒酱一点一点出现了，好像辣椒酱从火腿肠根部涂抹上去一样

<div class="outer">
    <div class="test">
        <p class="text">23</p>
        <svg height="48" width="48" viewBox="-29 -29 58 58">
        <defs>
        <linearGradient id="gradient" x1="0" x2="0" y1="1" y2="0">
        <stop offset="0%" stop-color="#3AA4F6"></stop>
        <stop offset="100%" stop-color="#986BFF"></stop>
        </linearGradient>
        </defs>
        <circle stroke="#2e2e36" fill="none" pathLength="100" class="vBJsM" r="24" style="stroke-width: 5px;"></circle>
        <circle visibility="visible" fill="none" pathLength="100" transform="rotate(-90)" class="sTZHP" r="24" stroke="url(#gradient)"
        style="stroke-dasharray:45 100; stroke-dashoffset: 0; stroke-width: 5px;"></circle>
        </svg>
    </div>
</div>

.test {
    background: #202123;
    position: relative;
    width: 48px;
    height: 48px;
}

.text {
    color: #fff;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin: 0;
}

.outer {
    background: #202123;
}