HTML 如何实现一个带间隙的圆环

实际效果:

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/5e634cedded9424d96fbe6d46f34f61a.png#pic_center![在这里插入图片描述](https://file.jishuzhan.net/article/1783777159681150978/6b2263c205bd7ce62b9e087eddef2ac1.webp)

代码实现:

HTML部分:

xml 复制代码
<svg width="500" height="500" viewBox="0 0 100 100">
  <!-- 各参数详解 -->
  <!-- stroke:圆环(轮廓)填充色 -->
  <!-- stroke-width: 圆环(圆的轮廓)的宽度 -->
  <!-- stroke-dasharray: 设置轮廓的间隙,会按照轮廓颜色-空白-轮廓颜色-空白...这样的规律去无限渲染 -->
  <!-- r:圆环的半径,该半径的计算为两个圆的中心点。例如:圆环的宽度为10 组成圆环的两个圆半径分别为10,20,则r应该设为15 -->
  <!-- fill:圆的内部填充色,我们想实现圆环效果,就需要设置其为transparent让其显示背景色,这样圆只显示轮廓,即圆环 -->
  <!-- cx,cy:圆心点的坐标 -->
  <!-- transform:平移、旋转、缩放圆环 -->

  <!-- 最下层的圆 蓝色区域 -->
  <circle
    id="circle1"
    cx="50"
    cy="50"
    r="31"
    stroke="blue"
    stroke-width="5"
    fill="transparent"
    stroke-dasharray="100,0"
    transform="rotate(-94 50 50)"
  />

  <!-- 中间的圆 灰色区域 -->
  <circle
    id="circle2"
    cx="50"
    cy="50"
    r="31"
    stroke="gray"
    stroke-width="5"
    fill="transparent"
    stroke-dasharray="0,100"
    transform="rotate(-94 50 50)"
  />
  <!-- 顶部圆环 设置间隙 颜色设为白色(背景色) -->
  <!-- stroke-width属性设置的比前两个圆稍微大一些,否则圆的轮廓会出现两条圆环的线 -->
  <circle
    id="circle3"
    cx="50"
    cy="50"
    r="31"
    stroke="white"
    stroke-width="6"
    fill="transparent"
    stroke-dasharray="0,100"
    transform="rotate(-94 50 50)"
  />
</svg>

JS部分

typescript 复制代码
  // 在线数量
  onlineCount = 3;
  // 离线数量
  offlineCount = 4;
typescript 复制代码
    const circle1 = document.getElementById('circle1');
    const circle2 = document.getElementById('circle2');
    const circle3 = document.getElementById('circle3');
    circle1?.setAttribute('stroke-dasharray', this.getCircle(1));
    circle2?.setAttribute('stroke-dasharray', this.getCircle(2));
    circle3?.setAttribute('stroke-dasharray', this.getCircle(3));
typescript 复制代码
// 此函数主要为计算三个圆环的占比
  // 需要先计算出圆环的周长,再根据周长分配各部分的长度,例如:此处三个圆环半径为31,则周长为31*3.14*2=194.68,约等于195
  // 第一个圆环渲染蓝色区域,计算出蓝色区域与空白区域
  // 第二个圆环渲染灰色区域,由于渲染的起始位置相同,所以计算时先渲染一段0长度的实际区域,再渲染一段蓝色区域长度的空白区域,显示第一个圆环的蓝色区域,然后再渲染灰色区域
  // 第三个圆环则添加圆环中的间隙(此函数设置为2,可根据实际需求更改)
  getCircle(index: any) {
    switch (index) {
      case 1:
        if (this.onlineCount === 0) {
          if (this.offlineCount === 0) {
            return '195,0';
          } else {
            return '0,195';
          }
        } else if (this.offlineCount === 0) {
          return `195,0`;
        } else {
          const length =
            (195 / (this.onlineCount + this.offlineCount)) * this.onlineCount;
          return `${length},${195 - length}`;
        }

      case 2:
        if (this.onlineCount === 0) {
          if (this.offlineCount === 0) {
            return '0,195';
          } else {
            return '195,0';
          }
        } else if (this.offlineCount === 0) {
          return '0,195';
        } else {
          const length =
            (195 / (this.onlineCount + this.offlineCount)) * this.offlineCount;
          // 先绘制0长度的实际灰色区域,再绘制空白区域(用于显示第一个圆环的蓝色),再绘制灰色区域
          return `0,${195 - length},${length}`;
        }

      case 3:
        if (this.onlineCount === 0) {
          if (this.offlineCount === 0) {
            return '0,195';
          } else {
            const length = 195 / this.offlineCount - 2;
            return `2,${length}`;
          }
        } else if (this.offlineCount === 0) {
          const length = 195 / this.onlineCount - 2;
          return `2,${length}`;
        } else {
          const length = 195 / (this.onlineCount + this.offlineCount) - 2;
          return `2,${length}`;
        }

      default:
        return '';
    }
  }
相关推荐
m0_6161884927 分钟前
PDF预览-搜索并高亮文本
开发语言·javascript·ecmascript
勘察加熊人1 小时前
vue猜词游戏
前端·vue.js·游戏
且心1 小时前
【问题处理】webpack4升webpack5,报错Uncaught ReferrnceError: process is not defined
前端·webpack5·process·uncaught·referrnceerror
美美打不死1 小时前
webpack js 逆向 --- 个人记录
开发语言·javascript·webpack
我是哈哈hh1 小时前
【Vue】 核心特性实战解析:computed、watch、条件渲染与列表渲染
前端·javascript·vue.js·前端框架·vue·语法基础
龙在天2 小时前
“手速太快,分页翻车?”,前端分页竞态问题,看这一篇就够了
前端
前端Hardy2 小时前
HTML&CSS:超好看的收缩展开菜单
javascript·css·html
Riesenzahn2 小时前
你使用过css3的:root吗?说说你对它的理解
前端·javascript
前端Hardy2 小时前
HTML&CSS:哇塞!Three.js 打造的 3D 交互平面,鼠标滑动纹理如梦幻般变形!
javascript·css·html
Riesenzahn2 小时前
在js中undefined和undeclared有什么区别?
前端·javascript