SVG环形进度图嵌入表格单元格需解决错位、缩放、对齐问题：根本原因是viewBox与容器尺寸未对齐且未适配流式布局；应设width/height为100%、匹配viewBox坐标系、用vertical-align:middle和text-align:center居中，并通过CSS变量支持深色模式。
SVG环形进度图嵌入表格单元格的常见错位问题
直接把 SVG 写进 <td> 里，经常出现居中失败、缩放变形、文字偏移 —— 根本原因不是表格本身，而是 SVG 的 viewBox 和容器尺寸没对齐，且未处理默认坐标系与表格流式布局的冲突。
关键点：表格单元格是流式容器，而 SVG 默认按自身 width/height 渲染；不显式控制尺寸和对齐方式，<circle> 就会“飘”在左上角或被裁切。
- 别用固定像素宽高（如
width="120" height="120"），改用width="100%" height="100%"并配合viewBox -
viewBox必须与内部<circle>的cx/cy/r数值匹配（例如viewBox="0 0 100 100"时，cx="50" cy="50" r="45"） - 给
<td>加vertical-align: middle和text-align: center，否则<text>会贴边 - 避免在
<td>上设padding过大，否则 SVG 内容会被挤压 —— 推荐用box-sizing: border-box统一计算
如何让进度环随表格行高自适应缩放
表格行高变化时，环形进度图必须同步缩放，否则在移动端或响应式布局中会溢出或过小。纯 CSS 缩放（如 transform: scale()）会导致 stroke-width 变粗/变细，破坏视觉比例；正确做法是靠 viewBox + 百分比尺寸驱动原生缩放。
-
<svg>设width="100%" height="100%"，且父<td>显式设最小高度（如min-height: 60px） -
viewBox固定为等比数值（如"0 0 100 100"），所有内部坐标（cx,cy,r）都按此比例写死 -
stroke-width用无单位数值（如8），它会随 SVG 整体缩放自动适配，无需 JS 计算 - 若需精确控制最小尺寸，可在
<td>上加min-width，避免 SVG 压缩到不可读
表格中多个进度环共用同一套 JS 更新逻辑
一个表格常有多行数据，每行一个进度环，但写一堆重复的 document.getElementById() 很容易漏绑或命名冲突。更可靠的方式是用 data 属性标记目标元素，再统一监听或批量更新。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 每个进度环的
<circle>加data-progress-id="row-1"，对应行数据中的进度值 - JS 里用
document.querySelectorAll('circle[data-progress-id]')一次性获取全部进度环 - 更新时只改
stroke-dashoffset，别碰stroke-dasharray（它应始终等于周长，固定写死） - 百分比转偏移量公式统一为：
circumference * (1 - percent / 100)，其中circumference = 2 * Math.PI * r - 动画用 CSS
transition: stroke-dashoffset 0.3s ease-out，避免 requestAnimationFrame 增加复杂度
深色模式下环形进度图颜色失效怎么办
很多深色模式方案靠 @media (prefers-color-scheme: dark) 切换 CSS 变量，但 SVG 内联样式（如 stroke="#4CAF50"）不会响应 —— 它写死在 HTML 里，CSS 无法覆盖。
- 把颜色抽成 CSS 自定义属性，例如
--progress-color: #4CAF50，并在<circle>上用stroke="var(--progress-color)" - 确保 SVG 在
<body>内（而非<head>或 shadow DOM），才能继承全局 CSS 变量 - 背景环颜色也要用变量（如
stroke="var(--progress-bg)"），否则深色模式下灰底+灰环就看不见了 - 测试时别只看浏览器开发者工具的“强制深色”，要真开系统深色模式，某些 WebView 不触发 media query
最易被忽略的是 stroke-dashoffset 的初始值设置：0% 进度必须等于周长，100% 必须等于 0；哪怕算错 0.1，收口处就会裂开或重叠 —— 务必用 2 * Math.PI * r 动态算，别手敲近似值。
