超级简单三步实现svg圆形进度条

    技术2023-09-27  103

    先上效果图

    前置知识

    <circle> 定义一个圆

    circle有三个属性

    cx=“圆的x轴坐标”cy=“圆的y轴坐标”r=“圆的半径”

    svg的基本属性

    fill 填充stroke 描边颜色stroke-width 描边宽度stroke-dasharray 创建线条(这个属性是实现的关键)

    ok 然后开始画图,首先按照circle的属性画出两个圆

    <svg> <circle cx='70' cy='70' r='70'></circle> <circle cx='70' cy='70' r='70'></circle> </svg>

    第一步的效果应该是这样的 第二步按照上面提到的svg的基本属性添加样式

    svg circle { fill: none; stroke: #e4e4e4; stroke-width: 10px; transform: translate(5px, 5px); }

    得到如下 第三步把第二个圆的颜色改成蓝色,并且计算好它与周长的比例关系

    svg circle:nth-child(2){ stroke: cornflowerblue; stroke-dasharray: calc(70/100*440),440; }

    得到如下(70%)

    这里的440是圆的周长, 通过 r=“圆的半径”=70 周长=r×2×PI 得到周长等于440

    以上

    Processed: 0.010, SQL: 9