如何使用 SVG 创建圆形进度条？

在本文中，我们将学习如何使用 SVG 创建圆形进度条。

让我们从 HTML 部分开始。在 SVG 圆中，cx 和 cy 属性定义了圆的 x 和 y 坐标。如果没有将 cx 和 cy 带到圆的中心，则将其设置为 (0,0)。 r 属性定义圆的半径。 Span 是一个内联字符容器，用于标记文本的一部分。它可以很容易地通过 CSS 设置样式。 Span 很像 HTML div元素，但div是块级元素。 div块在视觉上隔离了页面上的文档部分，并且可能包含其他块级组件。

HTML

  

    
    
    
    
    

  

  
  
    

        

            
            90%
        
        c++ developer
    
    

        

            
            75%
        
        python developer
    
    

        

            
            40%
        
        php developer
    

  

CSS box-sizing允许我们在元素的总宽度和高度中包含内边距和边框。 CSS transform 属性为元素提供 2D 或 3D 转换。该属性允许旋转、移动等。溢出属性有助于剪辑内容。 stroke-width用于设置 SVG 形状的边框宽度。

Nth-child 匹配作为其父元素的第 n 个子元素的每个元素。 N 可以是数字、关键字或公式。 stroke-dash-offset 定义了一个 SVG 路径上的一个笔划的虚线开始的位置。 stroke-dash-array 属性用于在 SVG 形状的笔划中创建破折号。 CSS calc()函数在指定 CSS 属性值时执行计算。 calc()函数允许使用加法 (+)、减法 (-)、乘法 (*) 和除法 (/) 的数学表达式作为分量值。

样式文件

*,*:after,*:before{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
body{
    font-family: arial;
    font-size: 16px;
    margin: 0;
    background: #122325;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 100vh;
}
  
svg{
    width: 200px;
    height: 200px;    
    transform: rotate(-90deg);
    overflow: initial;
} 
  
circle{
    stroke-width:20px;
    fill:none;    
}
circle:nth-child(1){ stroke: #fff }
circle:nth-child(2){
    stroke: #f00; 
    position: relative;
    z-index: 1;    
}
.circle_box:nth-child(1) circle:nth-child(2){
    stroke-dashoffset:calc(100 * 6);
    stroke-dasharray:calc(100 * 6);
    stroke-dashoffset:calc((100 * 6) - ((100 * 6) * 90) / 100); 
    stroke-position: inside;
}
.circle_box:nth-child(2) circle:nth-child(2){
    stroke-dashoffset:calc(100 * 6);
    stroke-dasharray:calc(100 * 6);
    stroke-dashoffset:calc((100 * 6) - ((100 * 6) * 75) / 100);
    stroke: rgb(37, 224, 109);  
}
.circle_box:nth-child(3) circle:nth-child(2){
    stroke-dashoffset:calc(100 * 6);
    stroke-dasharray:calc(100 * 6);
    stroke-dashoffset:calc((100 * 6) - ((100 * 6) * 40) / 100);
    stroke: rgb(227, 241, 25);  
}
.circle_box{
    font-size: 36px;
    color: #fff;
    text-align: center;
}
.circle_box div{
    position: relative;
}
.circle_box span{
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
    color: #fff;
    font-size: 40px;
}

输出：现在，正如您在输出中看到的那样，我们创建了一个漂亮的进度图表，它会吸引读者阅读一个人在编程语言中的进度。