ADHD时间感知组件
我是想最近的那个ADHD证它并不是非常流行嘛然后我就想有些人就是说他这个症状呢就是说对时间的感知不够敏感一周过去了发生了一些事情然后你回忆起来一些事情你没有办法去对应到它是星期几去发生的所以ADHD对于时间跟事件他的感知是揉在一团的没有办法一一的去给它对应起来时间流逝的话它的感知也不够清晰所以就是有一些开发者就为了帮助ADHD患者制作了一些软件帮助他们提高对于时间流逝的敏感度就是有一些时间的组件我觉得我也非常需要这样的组件它能够实时地根据时间进行一些呃圆圈或者钟表元素的变化我觉得我确实应该学习一下
三个颜色:
D:#84c677
M:#c6c149
Y:#cd4559
百分比数字是加粗的斜体 b i
第一次使用SVG
发现环形图真的很有意思 有很多没有见过的 样式的写法 非常有趣
这个属性可以让让环形柱状图的边缘变得圆润！
这个表示描边的宽度。就是往圆心方向和远离圆心的方向移动stroke-width/2
transform="rotate(-90, 60, 60)" 再进行旋转 这样就可以让环形柱状条的起始点在正上方。
rotate(angle)- 只指定旋转角度rotate(angle, cx, cy)- 指定旋转角度和旋转中心点rotate(angle, cx, cy)- 使用矩阵表示法
viewBox="0 0 120 120" 是SVG中的一个重要属性，让我来详细解释它的含义和作用：
viewBox 的基本语法
viewBox="min-x min-y width height"
在你的例子中 viewBox="0 0 120 120"，这四个参数分别是：
min-x = 0：视口左上角的x坐标
min-y = 0：视口左上角的y坐标
width = 120：视口的宽度
height = 120：视口的高度
具体解释
坐标系定义
定义了一个120x120单位的内部坐标系
原点(0,0)在左上角
x轴向右为正方向，y轴向下为正方向
右下角坐标是(120,120)
实际效果
<svg width="120" height="120" viewBox="0 0 120 120">SVG元素的实际显示尺寸是120x120像素（由width和height属性定义）
viewBox定义的坐标系与实际显示尺寸是1:1对应关系
这意味着viewBox中的1个单位等于实际显示中的1个像素
重要特性
自动缩放：如果改变SVG的实际尺寸，内容会自动缩放以适应
保持比例：内容会保持原始比例
实际应用示例
1:1显示（当前情况）
<svg width="120" height="120" viewBox="0 0 120 120">实际尺寸：120x120像素
内部坐标：120x120单位
比例：1:1
放大显示
<svg width="240" height="240" viewBox="0 0 120 120">实际尺寸：240x240像素
内部坐标：120x120单位
比例：2:1（内容会放大2倍显示）
缩小显示
<svg width="60" height="60" viewBox="0 0 120 120">实际尺寸：60x60像素
内部坐标：120x120单位
比例：1:2（内容会缩小一半显示）
在你的环形图中的具体应用
<svg width="120" height="120" viewBox="0 0 120 120"> <circle cx="60" cy="60" r="50" ... /> </svg>
圆心在(60,60)，正好在viewBox的中心
半径50，所以圆会占据大部分空间，但不会超出边界
这种设置使得图形可以完美地适应120x120的显示区域
viewBox的优势
响应式设计
可以轻松调整SVG大小而不失真
适合不同屏幕尺寸的显示
精确定位
提供了一个可预测的坐标系
便于计算元素位置
可伸缩性
可以随时调整显示大小
保持图形比例不变
这就是为什么viewBox在SVG设计中如此重要的原因，它提供了一个灵活而精确的方式来控制SVG内容的显示。
那我原本的图就画错了 因为是竖直向下才是y轴的正方向！
还是通过svg去添加文本的 这样看来svg还是挺好用的！
一开始写.percentage是没有反应的 但是后来添加了span才成功显示。
