前置知识
<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
以上