先上效果图
前置知识
<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
以上